Skip to content

Toast13.10.5

Toasts display brief, temporary notifications. They are meant to be noticed without disrupting a user's experience or requiring an action to be taken.


$ npm i @if-design-system/toast@13.10.5

Info message
Edit this section

Variations

Type Purpose
Info toast A neutral message
Success toast A successful message
Warning toast A warning message
Error toast An error message
Edit this section

Usage

Principles

Toast or dialog?

Toasts should only be used for confirmations, simple notifications, and low-priority alerts that do not need to completely interrupt the user experience. Dialogs are ideal when a situation requires the user's attention, either for displaying important information or prompting for a response.

File uploaded

Placement

The toast position is always bottom center of screen.

Don't display more than one action

Actionable toasts should only have one button.

File archived
File archived

Don't include a redundant action

Actionable toasts should not have a button with a redundant action. For example, “dismiss” would be redundant because all toasts already have a close button.

Copied to clipboard

Multiple toasts

Max two toasts can be present at all times. If two toasts are present, and a new one is presented, remove the oldest toast.

Claim created
File uploaded
Email sent
Copied to clipboard
Copied to clipboard
Email sent
Edit this section

Behaviours

Modifiers

Info (default)

Info message
Info message
<div class="if toast [info] [has-icon]" data-text="Info message">
  Info message
</div>

Success

Success message
Success message
<div class="if toast success [has-icon]" data-text="Success message">
  Success message
</div>

Warning

Warning message
Warning message
<div class="if toast warning [has-icon]" data-text="Warning message">
  Warning message
</div>

Error

Error message
Error message
<div class="if toast error [has-icon]" data-text="Error message">
  Error message
</div>
Edit this section

Accessibility

Announcing toast message content without focus

Whenever a toast is present, use srSpeak to read the messagge to the user.

New to WCAG 2.1, satisfying Guideline 4.1.3 requires that:

In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

Using ARIA techniques such as role alert and aria-live, toast messages can be made available for screen reading technologies as soon as they are displayed.

Focus

If a Toast has got focusable elements, make sure the focus is set to the first focusable element when the toast is in the view.

Also, make sure you have focus trapped the keyboard navigation when focusing the first focusable element.

Keyboard navigation

The user can navigate the focusable elements with Tab and Shift+Tab. The user can also use Enter for interactive elements.

Edit this section

Anatomy

Warning message
Toast
  1. Icon (optional)
  2. Text
  3. Action (optional)
  4. Close (optional)

Options

All files archived
Text

Toasts must include text to communicate a message. Write the text as concisely as possible while still being clear about what has happened or happening

Your session is about to expire
Icon

An icon can be used to further emphasize the conveyed message

Image deleted
Action

An action can be included. Let the action label be short, consice and actionable

2 assets missing
Close

Whenever an action is used, a close action is mandatory

Auto dismissable

By default, a toast will dismiss after 5 seconds. A toast also has the option to be closed by a close button, when an action is used. If an auto dismissable toast is used, make sure that the action is still accessible elsewhere in the application.

Edit this section

Specs

Error message
Edit this section

Code

Markup

<div class="if toast [info|success|warning|error] [has-icon]" data-text="message">
  message
</div>

Webcomponent

The webcomponent is fully scoped, and uses shadow DOM.

Install

$ npm install @if-design-system/toast-webcomponent

Or for Yarn:

$ yarn add @if-design-system/toast-webcomponent

Usage

The <ids-toast>-webcomponent operates as a factory for toasts to be displayed. Use events to trigger toasts.

With the given markup:

<ids-toast></ids-toast>
<script src="…toast-webcomponent.umd.js"></script>

And the event:

const _dispatchToastEvent = ({ ...args }) => {
  const _event = new CustomEvent('ids:toast', {
    bubbles: !0,
    detail: {
      payload: { ...args }
    }
  });
  document.dispatchEvent(_event);
};

_dispatchToastEvent({
  target: e.target,
  toggle: () => {
    console.info('toggle');
  },
  message: 'Short message',
  type: 'info|success|warning|error',
  icon: true || false,
  action: () => {
    console.info('action');
  },
  actionText: 'Undo',
  close: () => {
    console.info('close');
  }
});

Options: Object

Name Type Default Mandatory?
target Element Element the toast is initiated from No
toggle Function A callback to be used when the toast is toggled No
message String The mssage to display Yes
type String Type of toast No
icon Boolean Use icon? No
action Function A callback to be used when the action is used No
actionText String Text of the action button Only if a callback for action is given
close Function A callback to be used when the toast is closing No
Edit this section

Contact us