NotificationMarker
Shows a notification marker dot at the top right of the component.
import * as React from 'react';
import { NotificationMarker } from '@itwin/itwinui-react';
import { SvgNotification } from '@itwin/itwinui-icons-react';
export default () => {
return (
<NotificationMarker status='primary'>
<SvgNotification />
</NotificationMarker>
);
};
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.
<IconButton label='Notifications' styleType='borderless'> <NotificationMarker> <SvgNotification /> </NotificationMarker></IconButton>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.
<NotificationMarker enabled={notifications.length > 0}>…</NotificationMarker>When enabled is set to false, the DOM element will still be present, but the notification marker will not be displayed visually.
Status
NotificationMarkers can have the follow statuses:
primary(default)positivewarningnegativewhite
import * as React from 'react';
import { NotificationMarker, IconButton, Text } from '@itwin/itwinui-react';
import { SvgNotification } from '@itwin/itwinui-icons-react';
export default () => {
return (
<div className='demo-container'>
<IconButton label='Primary' styleType='borderless'>
<NotificationMarker status='primary'>
<SvgNotification />
</NotificationMarker>
</IconButton>
<IconButton label='Positive' styleType='borderless'>
<NotificationMarker status='positive'>
<SvgNotification />
</NotificationMarker>
</IconButton>
<IconButton label='Warning' styleType='borderless'>
<NotificationMarker status='warning'>
<SvgNotification />
</NotificationMarker>
</IconButton>
<IconButton label='Negative' styleType='borderless'>
<NotificationMarker status='negative'>
<SvgNotification />
</NotificationMarker>
</IconButton>
<IconButton label='White' styleType='high-visibility'>
<NotificationMarker status='white'>
<SvgNotification />
</NotificationMarker>
</IconButton>
<IconButton label='White' styleType='cta'>
<NotificationMarker status='white'>
<SvgNotification />
</NotificationMarker>
</IconButton>
</div>
);
};
The white status is used on colored backgrounds, such as when using it in the high visibility or the 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.
import * as React from 'react';
import { NotificationMarker, IconButton, Text } from '@itwin/itwinui-react';
import { SvgNotification } from '@itwin/itwinui-icons-react';
export default () => {
return (
<IconButton label='Notifications' styleType='borderless'>
<NotificationMarker status='negative' pulsing>
<SvgNotification />
</NotificationMarker>
</IconButton>
);
};
Props
| Prop | Description | Default |
|---|---|---|
| children | Content of the NotificationMarker. ReactNode | |
| status | Status of notification
"primary" | "positive" | "warning" | "negative" | "white" | 'primary' |
| pulsing | Adds a pulse effect to the notification. WARNING: Avoid overuse of this prop. boolean | false |
| enabled | 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.boolean | true |
| as | "symbol" | "object" | "span" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 159 more ... | FunctionComponent<...> |