Skip to main content

Notification

A notification communicates to a user timely or important information.

Code documentation

Web

Anatomy

The notification component is made up of five elements.

  1. Container
  2. Icon slot
  3. Default slot
  4. Dismiss icon slot
  5. Action slot
Anatomy diagram numbering five elements of a notification.

Variants

Type

Alert

Alerts appear as block-level elements anywhere within the normal flow of content.

An informational alert is positioned within a card's internal padding underneath the header and above the body content.

Banners are able to break out of the standard flow and go edge-to-edge within a container, even if padding is applied. Banners can be used to make the notification feel more integrated with its parent component or as a way to handle application-wide notifications at the top of the screen.

An informational banner is positioned at the top of a dashboard mockup and spans the entire represented viewport.

Appearance

Neutral

Neutral notifications are used in contexts that are largely informative and have no positive or negative connotation.

The informational message 'Transfers completed after 5 p.m. will be processed the next business day' is placed within a neutral notification.

Positive

Positive notifications are used in contexts that convey a positive connotation such as approved, complete, and deposited.

The affirmative message 'image.jpg was successfully uploaded' is placed within a positive notification.

Negative

Negative notifications are used in contexts that convey a negative connotation such as error, alert, or rejected.

The error message 'Error getting data' is placed within a negative notification.

Icon

A user-customizable icon can be paired with the text for increased visual emphasis.

An 'I' within a circle precedes the message 'Alerts are not available for this account at this time' to visually convey its informational nature.

Dismiss button

An icon-only dismiss button can be enabled in the top-right to clear the notification. The icon is user-customizable.

An X icon is aligned to the right edge of the notification container inline with the notification text.

Action buttons

A series of buttons can be placed side-by-side within the notification to provide the user contextual actions.

A negative alert with the message 'Are you sure you want to delete' has two inline action buttons, one labeled 'Nevermind' and another labeled 'Delete'.

Stacked

By default, action buttons are in line with the text. However, they can be stacked below the text in situations where either the text or the button label is relatively long.

A negative alert with the message 'Are you sure you want to delete' has two action buttons, one labeled 'Nevermind' and another labeled 'Delete'. These action buttons are positioned below the message text and 'X' dismiss button.

Behavior

Text overflow

The default slot expands to fill the available space of the notification container not already taken up by the action buttons and dismiss button. Within the default slot, text wraps to form another line when it is too long for the available space.

Two notifications are compared top-to-bottom. The top notification includes text that wraps to three lines. An X icon is aligned to the right edge of the notification container inline with the first line of text. The bottom notification is similar to the top example with the addition of button labeled Ok also inline with the first line of text and the X icon.