Examples
Basic
Notifications
3 unread- unread
Info notification:Unread info notification title
This is an info notification description. - unread
Danger notification:Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines. - unread
Danger notification:Unread danger notification title. This is a long title to show how the title will be truncated if it is long and will be shown in a single line.
This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines. - read
Warning notification:Read warning notification title
This is a warning notification description. - read
Success notification:Read success notification title
This is a success notification description. - read
notification:Read (default) notification title
This is a default notification description.
Groups
Notifications
4 unread- unread
Info notification:Unread info notification title
This is an info notification description. - unread
Danger notification:Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines. - read
Warning notification:Read warning notification title
This is a warning notification description. - read
Success notification:Read success notification title
This is a success notification description.
No alerts found
There are currently no critical alerts firing. There may be firing alerts of other severities or silenced critical alerts however.
Lightweight
Notifications
- unread
Info notification:Info notification title
This is an info notification description. - unread
Danger notification:Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines. - unread
Warning notification:Warning notification title
This is a warning notification description. - unread
Success notification:Success notification title
This is a success notification description.
No alerts found
There are currently no critical alerts firing. There may be firing alerts of other severities or silenced critical alerts however.
Props
NotificationDrawer
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the notification drawer | |
| className | string | Additional classes added to the notification drawer |
NotificationDrawerBody
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the body of the notification drawer | |
| className | string | '' | Additional classes added to the notification drawer body |
NotificationDrawerHeader
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the drawer | |
| className | string | '' | Additional classes for notification drawer header. |
| closeButtonAriaLabel | string | 'Close' | Adds custom accessible text to the notification drawer close button. |
| count | number | Notification drawer heading count | |
| customText | string | Notification drawer heading custom text which can be used instead of providing count/unreadText | |
| onClose | (event: KeyboardEvent | React.MouseEvent) => void | Callback for when close button is clicked | |
| title | string | 'Notifications' | Notification drawer heading title |
| unreadText | string | 'unread' | Notification drawer heading unread text used in combination with a count |
NotificationDrawerGroup
| Name | Type | Default | Description |
|---|---|---|---|
| countrequired | number | Notification drawer group count | |
| isExpandedrequired | boolean | Adds styling to the group to indicate expanded state | |
| titlerequired | React.ReactNode | Notification drawer group title | |
| children | React.ReactNode | Content rendered inside the group | |
| className | string | '' | Additional classes added to the group |
| headingLevel | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h1' | Sets the heading level to use for the group title. Default is h1. |
| isRead | boolean | false | Adds styling to the group to indicate whether it has been read |
| onExpand | (event: any, value: boolean) => void | (event: any, expanded: boolean) => undefined as any | Callback for when group button is clicked to expand |
| tooltipPosition | | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | Position of the tooltip which is displayed if text is truncated | |
| truncateTitle | number | 0 | Truncate title to number of lines |
NotificationDrawerGroupList
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the notification drawer list body | |
| className | string | '' | Additional classes added to the notification drawer list body |
NotificationDrawerList
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Adds an accessible label to the notification drawer list. | |
| children | React.ReactNode | Content rendered inside the notification drawer list body | |
| className | string | '' | Additional classes added to the notification drawer list body |
| isHidden | boolean | false | Adds styling to the notification drawer list to indicate expand/hide state |
NotificationDrawerListItem
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the list item |
| className | string | '' | Additional classes added to the list item |
| isHoverable | boolean | true | Modifies the list item to include hover styles on :hover |
| isRead | boolean | false | Adds styling to the list item to indicate it has been read |
| onClick | (event: any) => void | (event: React.MouseEvent) => undefined as any | Callback for when a list item is clicked |
| readStateScreenReaderText | string | Visually hidden text that conveys the current read state of the notification list item | |
| tabIndex | number | 0 | Tab index for the list item |
| variant | 'custom' | 'success' | 'danger' | 'warning' | 'info' | 'custom' | Variant indicates the severity level |
NotificationDrawerListItemBody
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the list item body | |
| className | string | '' | Additional classes added to the list item body |
| timestamp | React.ReactNode | List item timestamp |
NotificationDrawerListItemHeader
| Name | Type | Default | Description |
|---|---|---|---|
| titlerequired | string | Notification drawer list item title | |
| actionHasNoOffset | boolean | false | Removes the offset of the notification drawer actions. |
| children | React.ReactNode | Actions rendered inside the notification drawer list item header | |
| className | string | '' | Additional classes for notification drawer list item header. |
| headingLevel | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h2' | Sets the heading level to use for the list item header title. Default is h2. |
| icon | React.ReactNode | null | Add custom icon for notification drawer list item header |
| srTitle | string | Notification drawer list item header screen reader title | |
| tooltipPosition | | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | Position of the tooltip which is displayed if text is truncated | |
| truncateTitle | number | 0 | Truncate title to number of lines |
| variant | 'success' | 'danger' | 'warning' | 'info' | 'custom' | 'custom' | Variant indicates the severity level |
CSS variables
| Expand or collapse column | Selector | Variable | Value |
|---|
