diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
new file mode 100644
index 00000000000..151834102a3
--- /dev/null
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -0,0 +1,63 @@
+---
+title: NotificationMarker
+description: Shows a notification marker dot at the top right of the component.
+thumbnail: #TODO
+---
+
+{frontmatter.description}
+
+
+
+
+
+## Usage
+
+The `NotificationMarker` component should be wrapped around the content which needs a marker/dot. This content is usually an icon, and is often used within an [`IconButton`](button#iconbutton).
+
+```jsx {2, 4}
+
+
+
+
+
+```
+
+### Conditional rendering
+
+There are many situations when the notification marker needs to appear/disappear depending on the application lifetime. Instead of conditionally rendering the `NotificationMarker` in such situations, the `enabled` prop can be used.
+
+```jsx
+ 0}>…
+```
+
+When `enabled` is set to `false`, the DOM element will still be present, but the notification marker will not be displayed visually.
+
+### Status
+
+`NotificationMarker`s can have the follow statuses:
+
+- `primary` (default)
+- `positive`
+- `warning`
+- `negative`
+- `white`
+
+
+
+
+
+The `white` status is used on colored backgrounds, such as when using it in the [high visibility](button#high-visibility) or the [call-to-action](button#call-to-action) buttons.
+
+### Pulsing
+
+To give a higher importance to the notification, you can use the `pulsing` prop to show a pulse effect around the marker.
+
+**Note**: This prop should be used sparingly as it can be distracting to the user.
+
+
+
+
+
+## Props
+
+
diff --git a/apps/website/src/content/docs/searchbox.mdx b/apps/website/src/content/docs/searchbox.mdx
index 8c5233eb77f..55a7f7e4fc3 100644
--- a/apps/website/src/content/docs/searchbox.mdx
+++ b/apps/website/src/content/docs/searchbox.mdx
@@ -2,7 +2,7 @@
title: SearchBox
description: A search input component
propsPath: '@itwin/itwinui-react/esm/core/SearchBox/SearchBox.d.ts'
-thumbnail:
+thumbnail: #TODO
---
{frontmatter.description}
diff --git a/examples/NotificationMarker.main.jsx b/examples/NotificationMarker.main.jsx
new file mode 100644
index 00000000000..b308529f3db
--- /dev/null
+++ b/examples/NotificationMarker.main.jsx
@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { NotificationMarker } from '@itwin/itwinui-react';
+import { SvgNotification } from '@itwin/itwinui-icons-react';
+
+export default () => {
+ return (
+
+
+
+ );
+};
diff --git a/examples/NotificationMarker.pulsing.jsx b/examples/NotificationMarker.pulsing.jsx
new file mode 100644
index 00000000000..60b264de0c3
--- /dev/null
+++ b/examples/NotificationMarker.pulsing.jsx
@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { NotificationMarker, IconButton, Text } from '@itwin/itwinui-react';
+import { SvgNotification } from '@itwin/itwinui-icons-react';
+
+export default () => {
+ return (
+
+
+
+
+
+ );
+};
diff --git a/examples/NotificationMarker.statuses.css b/examples/NotificationMarker.statuses.css
new file mode 100644
index 00000000000..08f31bea705
--- /dev/null
+++ b/examples/NotificationMarker.statuses.css
@@ -0,0 +1,4 @@
+.demo-container {
+ display: flex;
+ column-gap: 10px;
+}
diff --git a/examples/NotificationMarker.statuses.jsx b/examples/NotificationMarker.statuses.jsx
new file mode 100644
index 00000000000..799472e03c2
--- /dev/null
+++ b/examples/NotificationMarker.statuses.jsx
@@ -0,0 +1,49 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { NotificationMarker, IconButton, Text } from '@itwin/itwinui-react';
+import { SvgNotification } from '@itwin/itwinui-icons-react';
+
+export default () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/examples/index.tsx b/examples/index.tsx
index 104e68ec5ec..603f7ea9326 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -823,6 +823,26 @@ export { NonIdealStateErrorExample };
// ----------------------------------------------------------------------------
+import { default as NotificationMarkerMainExampleRaw } from './NotificationMarker.main';
+const NotificationMarkerMainExample = withThemeProvider(
+ NotificationMarkerMainExampleRaw,
+);
+export { NotificationMarkerMainExample };
+
+import { default as NotificationMarkerStatusesExampleRaw } from './NotificationMarker.statuses';
+const NotificationMarkerStatusesExample = withThemeProvider(
+ NotificationMarkerStatusesExampleRaw,
+);
+export { NotificationMarkerStatusesExample };
+
+import { default as NotificationMarkerPulsingExampleRaw } from './NotificationMarker.pulsing';
+const NotificationMarkerPulsingExample = withThemeProvider(
+ NotificationMarkerPulsingExampleRaw,
+);
+export { NotificationMarkerPulsingExample };
+
+// ----------------------------------------------------------------------------
+
import { default as OverlayMainExampleRaw } from './Overlay.main';
const OverlayMainExample = withThemeProvider(OverlayMainExampleRaw);
export { OverlayMainExample };
diff --git a/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx b/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx
index f65119bf80e..b6b4a6b2ef3 100644
--- a/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx
+++ b/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx
@@ -31,14 +31,15 @@ type NotificationMarkerProps = {
*/
pulsing?: boolean;
/**
- * Set this programmatically to false when you just want to render the passed children without the notification
- * @default true
+ * Instead of conditionally rendering the `NotificationMarker`, the `enabled` prop can be used.
+ *
+ * When `enabled` is set to `false`, the DOM element will still be present, but the notification marker will not be displayed visually.
+ *
* @example
- * let [newMessagesCount, ...] = useState(0);
- * ...
- * 0}>
- *
+ * 0}>
+ * …
*
+ * @default true
*/
enabled?: boolean;
};