A notification communicates to a user timely or important information.


The notification component is made up of five elements.

  1. Container
  2. Icon slot
  3. Default slot
  4. Dismiss icon slot
  5. Action slot




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.



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

The informational message


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

The affirmative message


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

The error message


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


Dismiss button

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

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


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


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.

Component tokens

The following component tokens are available for customizing the notification component.

Sample references including the swatch and computed values currently represent the applied light theme.

The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.





The notification component uses the following components: