Using Grommet for HPE?See Notification examples and guidance.
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.
array
[{ label: 'Renew Subscription', href: '/renew'}]
[ { label: 'Renew Subscription', href: '/renew'}, { label: 'View Details', href:'/details' } ]
boolean
true
false
string
"You were signed out due to inactivity."
node
<Text size='large'>...</Text>
function
(...args: any[]) => any
string
"unknown"
"normal"
"warning"
"info"
"critical"
boolean
true
false
object
autoClose
can be set to false to prevent the notification from closing after a period of time defined by notification.toast.time
.{ autoClose: boolean, position: 'bottom-right', }
string
"brand"
object
{ dark: "string", light: "string" }
object
{ round: 'xsmall', pad: { horizontal: 'small', vertical: 'xsmall' }, background: { color: 'background-front', } }
object
{ round: 'none', pad: { horizontal: 'large', vertical: 'xsmall', },
string
"row"
"column"
string
"status-critical"
object
{ dark: "string", light: "string" }
node
<StatusCriticalSmall />
<Icon />
SVG
<svg>...</svg>
object
background: { color: 'status-critical', opacity: 'weak', },
{ dark: "string", light: "string" }
object
background: { color: 'status-critical', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
object
background: { color: 'status-warning', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"background-front"
object
{ pad: { right: 'small' }, }
string
"text-strong"
object
{ dark: "string", light: "string" }
node
<CircleInformation />
<Icon />
SVG
<svg>...</svg>
object
background: { color: 'background-contrast', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
object
background: { color: 'background-back', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
object
background: { color: 'background-back', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"background-front"
object
"text"
string
"status-ok"
object
{ dark: "string", light: "string" }
node
<StatusGoodSmall />
<Icon />
SVG
<svg>...</svg>
object
background: { color: 'status-ok', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
object
background: { color: 'status-ok', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
object
background: { color: 'status-ok', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"background-front"
object
{ weight: 'bold', color: 'text' }
object
{ elevation: 'medium', width: 'medium' }
string
"column"
"row"
object
{ position: 'top', margin: 'medium', }
number
8000
string
"status-unknown"
object
{ dark: "string", light: "string" }
node
<StatusUnknownSmall />
<Icon />
SVG
<svg>...</svg>
object
background: { color: 'status-unknown', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
object
background: { color: 'status-unknown', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
object
background: { color: 'status-unknown', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"background-front"
object
background: { color: 'status-unknown', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
object
background: { color: 'status-unknown', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
object
background: { color: 'status-unknown', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
string
"status-warning"
object
{ dark: "string", light: "string" }
node
<StatusWarningSmall />
<Icon />
SVG
<svg>...</svg>
object
background: { color: 'status-warning', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"
object
background: { color: 'status-warning', opacity: 'weak', },
{ dark: "string", light: "string" }
string
"brand"