Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.

Toast GroupReady

Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.

Edit in CodePen
Open in new window
View RTL
<nord-button variant="primary">Add toast</nord-button>

<nord-toast-group>
<nord-toast>Message sent</nord-toast>
</nord-toast-group>

<script>
// clean up toasts once they are dismissed
const group = document.querySelector("nord-toast-group")
group.addEventListener("dismiss", e => e.target.remove())

// add toasts on click for demo purposes
const button = document.querySelector("nord-button")
button.addEventListener("click", () => group.addToast("Message sent"))
</script>

Slots

Slot nameDescription
Default slotDefault slot in which to place toasts.

Methods

Method nameParametersDescription
addToast(text: string, options: ToastOptions) => Toasttext: The text/message of the toast.
options: An optional object for configuring the toast's `variant` and `autoDismiss`.
Convenience method for creating and adding a toast to the group.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

  • Use in combination with Toast so that toasts get styled and announced to screen readers correctly.
  • Add as close to the bottom of the document as possible, ideally near the body closing tag, to maintain correct stacking order.

Don’t #

  • Don’t use for grouping anything other than toast components

Content guidelines #

Toast content should be clear, accurate and understandable by the user:

Message sent
Your message has been sent

When writing the toast content, use the {noun} + {verb} content formula:

Patient created
Your patient has been successfully updated

Use a maximum of 3 words when writing the toast content:

Product updated
Your product was updated just now

When writing the toast content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

Message sent
Message Sent

Avoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:

Changes saved
The changes were saved

Never end in punctuation:

Message sent
Message sent.

Additional considerations #

  • Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.
  • If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Localization

Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.

Localization Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.