Toast

Toasts deliver messages to communicate an ongoing process or, sometimes, a result of a user action. They typically disappear after a set interval or upon user dismissal, offering a non-intrusive way to provide feedback.

Usage

When to use

• To communicate a background process that has either started or ended, e.g., “Creating cluster”.
• To allow a user to quickly revert a destructive action.

When not to use

• To display contextual associative errors (e.g., form validation) or promotional content, consider Alert.
• As a dialog to confirm an action, consider Modal.

Color

Use color logically:

• Neutral: provide general information to the user about an ongoing process.
• Highlight: use interchangeably with neutral when more prominence is needed. Use sparingly.
• Success: indicate a successful action was completed.
• Warning: indicate a successful action was completed but may have triggered a related issue. Provide guidance and actions if possible.
• Critical: indicate an error or critical issues resulting from a failed action.

Critical toasts

Critical Toasts often persist (until dismissed) as they hold important information that requires the user's attention. Read more about when a toast should persist or timeout.

Icons

All Toasts have icons by default that are intentionally tied to the Toast color.

Icons within neutral and highlight Toasts can be replaced with other icons. Change them only when the new icon provides the user with extra value; otherwise, use the default icon provided.

Size

Toasts can be sized between 360px and 500px wide. Anything wider than 500px is considered disruptive to the user experience and may cover important information on the page.

Placement

Toasts appear in the bottom right corner of the viewport with a margin of 32px from the bottom and 24px from the right side of the viewport. If a warning or error is contextual to a specific UI feature, such as a form, directly associate an Alert to that feature instead of using a Toast.

Displaying multiple Toasts

When displaying multiple Toasts, they should stack vertically with a 16px margin between each Toast. For consistency, each stacked Toast should be the same width.

When to persist or timeout

A Toast can either persist until the user dismisses it or be automatically dismissed via a timeout.

If a Toast contains actions or critical information (often associated with a warning or critical toast), it should persist until the user dismisses it. Keep in mind that when a Toast persists, it will remain visible across all pages until dismissed.

Timeout best practices

When a Toast is set to timeout, it should auto dismiss after seven seconds. Content within Toasts that time out should be as concise as possible with only a few words, e.g., “Cluster created,” to allow enough time for a user to notice and read the contents before it auto dismisses.

We recommend setting a timeout for neutral, highlight, or success Toasts only. This ensures that critical information or information that requires immediate attention is not missed.

While we provide visual styling for this component, the product team must implement other features like transitions and what happens on dismiss. The showToast() function does the placement and the stacking for you.

How to use this component

The basic invocation requires a title and/or a description — the heading attribute and the content you write inside the tag — and the dismissible attribute for the dismiss button. By default a neutral Toast is generated.

<i80-toast heading="Title here" dismissible>Description here</i80-toast>

Title and description

Optionally, you can pass only the title or only the description.

<i80-toast heading="Title here" dismissible></i80-toast>
<i80-toast dismissible>Description here</i80-toast>

Color

A different color can be applied to the Toast using the color attribute. This will determine the default icon used in the Toast, unless overwritten.

<i80-toast color="success" heading="Title here" dismissible>Description here</i80-toast>

Icon

A different icon can be used in the Toast using the icon attribute. This accepts any icon name.

<i80-toast color="success" icon="bulb" heading="Title here" dismissible>Description here</i80-toast>

If you need to hide the icon, set icon="false".

<i80-toast color="success" icon="false" heading="Title here" dismissible>Description here</i80-toast>

Actions

Actions are the buttons and links you write inside the tag: an <i80-button> or an <i80-link-standalone> becomes an action.

<i80-toast color="critical" heading="Title here" dismissible>
  Description here
  <i80-button color="secondary">Your action</i80-button>
  <i80-link-standalone color="secondary" icon="plus" href="#">Another action</i80-link-standalone>
</i80-toast>

Structured content

When needed, the description can contain rich HTML or structured content.

We apply styling for a few simple HTML elements (e.g., strong, em, a, code/pre). If using other elements, you’ll need to style them accordingly.

pre

<i80-toast color="success" heading="Title here" dismissible>
  The description can contain HTML tags, like <strong>strong text</strong>,
  <em>emphasized text</em>, <code>code</code>, <pre>pre</pre>, and
  <i80-link-inline href="#">inline links</i80-link-inline>.
</i80-toast>

You can write more than one block-level element inside the tag to have multiple description lines.

<i80-toast color="success" heading="Title here" dismissible>
  <div>First line of description.</div>
  <div>Second line of description.</div>
</i80-toast>

Attributes

<i80-toast> renders this component. Everything it understands:

The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.

Anatomy

General recommendations

• Keep the title short, as this will be the most prominent element when users scan the Toast.
• Avoid ending the title with a period.
• Toast descriptions should be short but clear enough to explain what’s happening. We recommend keeping messages under 90 characters.
• For warning and critical Toasts, guide the users on how to prevent or fix the issue.

Actions

Use small buttons to avoid competing with other actions on the page. Use more than two actions sparingly.

We recommend using the secondary button variant for primary actions and the tertiary button variant for secondary actions.

For content guidelines on actions, refer to Button and Link documentation.

Usage of critical buttons

Avoid using critical Buttons in Toasts. We handle the prominence and importance via the styling of the Toast container itself. If needing to confirm that the user intended to interact with the action, consider displaying a confirmation Modal.

Links

When linking to internal and external resources in the Toast, default to using a secondary Standalone Link in the actions area.

Within the Toast description, use the secondary Inline Link as the default link color. A common use case for this is when linking to multiple resources.

Wrap links to multiple related items on the same page in a list, e.g., when highlighting multiple validation errors.

Composition

Toasts can be configured in a variety of ways. For example:

With icon and title

With icon, title, and description

Title and description only

The title or description should contain the Toast color type, e.g., “Warning,” if no icon is present.

With actions

With generic content

Conformance rating

When used as recommended, there should not be any WCAG conformance issues with this component.

Time on screen

A toast raised with showToast() disappears again on its own after six seconds. That is little time to read a message and none at all to act on one, so give anything longer than a few words a longer timeout, and pass timeout: 0 for a message that must stay until the user dismisses it. Never put the only copy of something the user needs — an error, an id, a link — in a toast that times out.

The toast is announced when it appears: <i80-toast> carries role="alert" and aria-live="polite".

Applicable WCAG Success Criteria

This section is for reference only. This component intends to conform to the following WCAG Success Criteria:

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.

0.1.0

Første i80-version (fork af upstream, se core/UPSTREAM.md).