The Notification component is a work-in-progress. This page is focused on the first iteration of Notifications, which is mainly the Toast Notification. We are currently exploring and ideating on banners, badging, bells, and inline, global and system notifications to include in future versions.
Toast Notifications
Toast notifications are used to communicate low severity level information to users in an unobtrusive way. They should be used sparingly to display low attention messages and statuses that do not require user action.
If there are multiple toast notifications, you should deal with them by having only one toast present at a time. Once the first toast is dismissed or timed out, the next one should appear.
Anchors that appear to the right of the title and message. Value should be provided as an array of objects, where the object accepts any Anchor properties.
array
[{ label: 'Renew Subscription', href: '/renew'}]
[ { label: 'Renew Subscription', href: '/renew'}, { label: 'View Details', href:'/details' } ]
A boolean flag indicating whether or not the Notification is a Global Notification. Global notifications are displayed directly beneath an application header as opposed to a notification within an individual page. Global Banner notifications can receive their own theming.
boolean
true
false
A custom message displayed under the title. Provides more information about the Notification.
string
"You were signed out due to inactivity."
Click handler. Not setting this property causes the Notification to not have a close button.
function
(...args: any[]) => any
An indicator that relays the current status of a Notification.
string
"unknown"
"normal"
"warning"
"critical"
The color of the close button icon.
string
A hex, name, or rgb value.
"brand"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
Any valid Box prop for the Notification container.
object
'background.color' is used for the container color.
{ pad: { horizontal: 'small', vertical: 'xsmall' }, background: { color: 'background-front', } }
Any valid Box prop for the Global Notification container.
object
{ pad: { horizontal: 'large', vertical: 'xsmall', },
The layout direction for the title and message of a global notification.
string
"row"
"column"
The color of the critical status icon.
string
A hex, name, or rgb value.
"status-critical"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
The default icon for a critical status Notification.
node
<StatusCriticalSmall />
<Icon />
SVG
<svg>...</svg>
The background of a critical Notification.
object
background: { color: 'background-front', opacity: 'weak', },
{ dark: "string", light: "string" }
The background of a critical global Notification.
object
background: { color: 'status-warning', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
The background of a critical toast Notification.
object
background: { color: 'status-warning', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
Any valid Box prop for the icon container.
object
{ pad: { right: 'small' }, }
The color of the info status icon.
string
A hex, name, or rgb value.
"text-strong"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
The default icon for an info status Notification.
node
<CircleInformation />
<Icon />
SVG
<svg>...</svg>
The background of an info Notification.
object
background: { color: 'background-back', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
The background of an info global Notification.
object
background: { color: 'background-back', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
The background of an info toast Notification.
object
background: { color: 'background-back', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
Any valid Text prop for the message text.
object
'color' is used for the message color.
"text"
The color of the normal status icon.
string
A hex, name, or rgb value.
"status-ok"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
The default icon for a normal status Notification.
node
<StatusGoodSmall />
<Icon />
SVG
<svg>...</svg>
The background of a normal Notification.
object
background: { color: 'status-ok', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
The background of a normal global Notification.
object
background: { color: 'status-ok', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
The background of a normal toast Notification.
object
background: { color: 'status-ok', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
Any valid Text prop for the title text.
object
'color' is used for the text color and 'weight' for the weight of the title.
{ weight: 'bold', color: 'text' }
Any valid Box prop for the Toast Notification container.
object
'width' is used for the default width of a Toast Notification.
{ elevation: 'medium', round: 'xsmall', width: 'medium' }
The layout direction for the title and message of a toast notification.
string
"column"
"row"
Any valid Layer prop for the Toast Notification layer.
object
'position' is used for the default positioning of a Toast Notification.
{ position: 'top', margin: 'medium', }
The time duration of a Toast Notification.
number
The value is in milliseconds (ms).
8000
The color of the unknown status icon.
string
A hex, name, or rgb value.
"status-unknown"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
The default icon for an unknown status Notification.
node
<StatusUnknownSmall />
<Icon />
SVG
<svg>...</svg>
The background of an unknown Notification.
object
background: { color: 'status-unknown', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
The background of an unknown global Notification.
object
background: { color: 'status-unknown', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
The background of an unknown toast Notification.
object
background: { color: 'status-unknown', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
The background of a Notification with no status defined.
object
background: { color: 'status-unknown', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
The background of a Notification with no status defined.
object
background: { color: 'status-unknown', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
The background of a Notification with no status defined.
object
background: { color: 'status-unknown', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
The color of the warning status icon.
string
A hex, name, or rgb value.
"status-warning"
object
An object with a color for dark and light modes.
{ dark: "string", light: "string" }
The default icon for a warning status Notification.
node
<StatusWarningSmall />
<Icon />
SVG
<svg>...</svg>
The background of a warning Notification.
object
background: { color: 'status-warning', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
The background of a warning global Notification.
object
background: { color: 'status-warning', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"