Alert

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. General guidelines
  2. Status levels
  3. Writing content
  4. Actions
  5. Layout
  6. Behavior
  7. Responsive design
  8. Best practices
  1. General guidelines
  2. Status levels
  3. Writing content
  4. Actions
  5. Layout
  6. Behavior
  7. Responsive design
  8. Best practices

General guidelines

In general, use an alert to communicate essential information to a user in a prominent way.

When to use an inline alert

Use an inline alert to communicate a short message about a specific user action within a component or layout. An inline alert appears in a content area and disappears when a user closes it or navigates away from the page. For example, use an inline alert to inform a user their form was submitted with errors.

When to use a toast alert

Use a toast alert to communicate a time-based update, confirmation, or other short message to a user without blocking their workflow. A toast alert overlays content in the top right corner of a page and disappears when a user closes it or when it times out. For example, use a toast alert to inform a user their information was submitted successfully.

Status levels

The status levels for alerts are Neutral, Info, Success, Warning, Caution, and Error. Each level communicates a specific message or severity.

Helpful tip

Go to the Color page to learn more about using status levels.

 Examples of the different colors indicating alert status

Dismissal

Depending on the message, an inline alert can be dismissible or not dismissible. The close button should not be included if it is critical that a user read or interact with the alert. A toast alert is always dismissible.

Alert element dismissal inline examples Alert element dismissal toast examples

Writing content

Both alert variants have limited space. Therefore content should be short and concise. A user should be able to quickly scan the content and know what steps to take next.

Element Character count How to write
Title text 60
  • Short and descriptive
  • Try to communicate the primary message using only title text
  • Must communicate severity
  • Write fewer words if there is body text
  • Write more words if there is no body text
Body text 150
  • Write 1 - 2 concise sentences and include links if necessary
  • Be concise and explain how to resolve an issue
  • Optional if title text accurately communicates the message
Action text 20 per button
  • Write 1 - 3 short words
  • Clearly write an action that a user can take
  • No long words or phrases

Actions

Actions enable a user to perform a specific action in relation to the alert message. Both alert variants may include actions, but no more than two. Actions require using specific elements, however including actions is optional.

Example of button action text

Layout

Inline

An inline alert appears at the top of a content area or close to an item needing attention. The width varies based on content and layout. They can expand to fill a container or related content area.

Example of an inline alert at the top of a layout Example of an inline alert inside a form

Toast

A toast alert slides in from the top right corner of a page and then disappears when a user closes it or when it times out. A toast alert can be set as persistent or temporary depending on the message.

  • Persistent - does not disappear unless dismissed by a user
  • Temporary - disappears after eight seconds unless dismissed by a user first
Toast alert with a link in the body text includes a close button

Behavior

Stacking

When multiple toast alerts appear one after the other, they stack. The most recent alert appears at the top and pushes the rest down. When an alert disappears, the rest will fill the empty space.

Three toast alerts are stacked in the top left corner of a layout Only one toast alert in the stack from the previous image is left

Responsive design

Large screens

On large screens, inline alert height is determined by the amount of content included. Inline alert width is determined by the width of its container or related content area. Toast alert height is also determined by content, but its max width is 480px.

Example of inline alert spanning content column width Example of a toast alert at content width

Small screens

On small screens, both alert variants will span one column, and toast alerts will continue to stack.

Example of toast and inline alerts span full column of small screen layout

Best practices

Mixing use cases

Example of using correct variants

Use the correct alert variants for the correct use cases.

 Example of using incorrect variants

Do not use an inline alert for toast alert use cases and vice versa.
Edit this page on GitHub