Notification

deliver transparent clarity for task and system statuses

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.

Props

actions

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' }
]

global

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

message

A custom message displayed under the title. Provides more information about the Notification.

string

"You were signed out due to inactivity."

onClose

Click handler. Not setting this property causes the Notification to not have a close button.

function

(...args: any[]) => any

status

An indicator that relays the current status of a Notification.

string

"unknown"

"normal"

"warning"

"info"

"critical"

title

A string that represents the title of a Notification.

string

"Your session has expired."

toast

A boolean flag that indicates whether or not the Notification is a Toast Notification.

boolean

true

false

object

When using Toast Notification a position is available to pass in as an object which will then be the position of the toast content. 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',
}

Theme

notification.close.color

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" }

notification.close.icon

The default close button icon.

node

<FormClose />

<Icon />

SVG

<svg>...</svg>

notification.container

Any valid Box prop for the Notification container.

object

'background.color' is used for the container color.


{
    round: 'xsmall',
    pad: { horizontal: 'small', vertical: 'xsmall' },
    background: {
        color: 'background-front',
    }
}

notification.direction

The layout direction for the title and message.

string

"column"

"row"

notification.global.container

Any valid Box prop for the Global Notification container.

object


{
  round: 'none',
  pad: {
    horizontal: 'large',
    vertical: 'xsmall',
},

notification.global.direction

The layout direction for the title and message of a global notification.

string

"row"

"column"

notification.critical.color

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" }

notification.critical.icon

The default icon for a critical status Notification.

node

<StatusCriticalSmall />

<Icon />

SVG

<svg>...</svg>

notification.critical.background

The background of a critical Notification.

object


background: {
  color: 'status-critical',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

notification.critical.global.background

The background of a critical global Notification.

object


background: {
  color: 'status-critical',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"brand"

notification.critical.toast.background

The background of a critical toast Notification.

object


background: {
  color: 'status-warning',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"background-front"

notification.iconContainer

Any valid Box prop for the icon container.

object


{
    pad: { right: 'small' },
}

notification.info.color

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" }

notification.info.icon

The default icon for an info status Notification.

node

<CircleInformation />

<Icon />

SVG

<svg>...</svg>

notification.info.background

The background of an info Notification.

object


background: {
  color: 'background-contrast',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"brand"

notification.info.global.background

The background of an info global Notification.

object


background: {
  color: 'background-back',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"brand"

notification.info.toast.background

The background of an info toast Notification.

object


background: {
  color: 'background-back',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"background-front"

notification.message

Any valid Text prop for the message text.

object

'color' is used for the message color.

"text"

notification.normal.color

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" }

notification.normal.icon

The default icon for a normal status Notification.

node

<StatusGoodSmall />

<Icon />

SVG

<svg>...</svg>

notification.normal.background

The background of a normal Notification.

object


background: {
  color: 'status-ok',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"brand"

notification.normal.global.background

The background of a normal global Notification.

object


background: {
  color: 'status-ok',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"brand"

notification.normal.toast.background

The background of a normal toast Notification.

object


background: {
  color: 'status-ok',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"background-front"

notification.textContainer

Any valid Box prop for the text container.

object


{
    gap: 'medium'
}

notification.title

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'
}

notification.toast.container

Any valid Box prop for the Toast Notification container.

object

'width' is used for the default width of a Toast Notification.


{
    elevation: 'medium',
    width: 'medium'
}

notification.toast.direction

The layout direction for the title and message of a toast notification.

string

"column"

"row"

notification.toast.layer

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',
}

notification.toast.time

The time duration of a Toast Notification.

number

The value is in milliseconds (ms).

notification.unknown.color

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" }

notification.unknown.icon

The default icon for an unknown status Notification.

node

<StatusUnknownSmall />

<Icon />

SVG

<svg>...</svg>

notification.unknown.background

The background of an unknown Notification.

object


background: {
  color: 'status-unknown',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"brand"

notification.unknown.global.background

The background of an unknown global Notification.

object


background: {
  color: 'status-unknown',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"brand"

notification.unknown.toast.background

The background of an unknown toast Notification.

object


background: {
  color: 'status-unknown',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"background-front"

notification.undefined.background

The background of a Notification with no status defined.

object


background: {
  color: 'status-unknown',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"brand"

notification.undefined.global.background

The background of a Notification with no status defined.

object


background: {
  color: 'status-unknown',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"brand"

notification.undefined.toast.background

The background of a Notification with no status defined.

object


background: {
  color: 'status-unknown',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"brand"

notification.warning.color

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" }

notification.warning.icon

The default icon for a warning status Notification.

node

<StatusWarningSmall />

<Icon />

SVG

<svg>...</svg>

notification.warning.background

The background of a warning Notification.

object


background: {
  color: 'status-warning',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"brand"

notification.warning.global.background

The background of a warning global Notification.

object


background: {
  color: 'status-warning',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"brand"

notification.warning.toast.background

The background of a warning toast Notification.

object


background: {
  color: 'status-warning',
  opacity: 'weak',
},

{ dark: "string", light: "string" }

string

"background-front"