Component Toast Group

Anatomy

1. Toast group container: The outer wrapper that positions the toast on the screen.
2. Left border: A semantic color that represents the message type (info, success, danger, warning).
3. Icon (optional): A visual cue that indicates the message type (info, success, danger, warning). The icon color matches the left border color.
4. Headline (optional): A brief title conveying the gist of the notification. Use sentence case and no punctuation.
5. Message text: One or two short sentences that provide feedback, confirm an action, or display a status update. Avoid repeating the headline.
6. Close button (optional): A button to dismiss the toast manually before it auto-dismisses.

Types

Info (default)

Use the info type to provide non-critical information.

<div>
  <som-toast id="toast1" headline="Update available" color="info">
    Version 3.3 is now ready! Enjoy many new features and bug fixes. 
  </som-toast>
</div>
<SomToast id="toast2" headline="Auto-save enabled" color="info" auto-dismiss={false} dismissible={false}>
  Your changes are saved automatically as you edit. 
</SomToast>
</div

Success

Use the success type to confirm a successful action or completed task.

<div>
  <som-toast id="toast3" headline="Contact saved" color="success">
    You have successfully added a new contact to your list. 
  </som-toast>
</div>
<SomToast id="toast4" headline="Backup complete" color="success" auto-dismiss={false} dismissible={false}>
  All 133 contacts were synced across your devices. 
</SomToast>
</div

Danger

Use the danger type to alert that something has gone wrong.

<div>
  <som-toast id="toast5" headline="File not saved" color="danger">
    Can't save file “ope.jpg” because another file with that name already exists. 
  </som-toast>
</div>
<SomToast id="toast6" headline="Network error" color="danger" auto-dismiss={false} dismissible={false}>
  Could not connect to server. Please try again in a few minutes. 
</SomToast>
</div

Warning

Use the warning type to caution about potential issues or unexpected results.

<div>
  <som-toast id="toast7" headline="File type not supported" color="warning">
    Please use a supported file type, such as .pdf, .docx, or .png. 
  </som-toast>
</div>
<SomToast id="toast8" headline="Low storage" color="warning" auto-dismiss={false} dismissible={false}>
  Free up some space to avoid issues. 
</SomToast>
</div

Using with toast group

A toast group is the required container for toast components. You must place an empty toast group on the page to ensure screenreaders can detect an aria-live area upon page load, then add individual toasts as needed.

Colors

Each notification type has an associated color and matching icon to signify different tone and meaning. While icons are optional, color alone is not a sufficient way to convey meaning or distinguish status. To ensure accessibility, always provide an additional indicator, like a descriptive headline or an icon, to communicate information.

Behavior

Placement

Toasts appear in the bottom-right corner of the screen by default. You can change the positioning to bottom-center or bottom-left via the position prop on the toast group component. Multiple toasts will stack vertically, with newer toasts appearing below older ones.

Dismissal

Toasts can be timed or persistent. By default, a toast will disappear automatically after 10 seconds or when the user clicks the close button. You can adjust the auto-dismiss time or turn off auto-dismiss altogether. You can also hide the close button if you don’t want users to manually dismiss.

Interactions

Mouse

Clicking the close button dismisses the toast (if set to dismissible).

Keyboard focus

The Esc key closes the toast. Tab moves focus to the close button (if present). Enter or Space activates the close button (if present).

How to use

Toasts are similar to the alert, dialog, and modal components, but should be reserved for simple feedback, low-priority notifications, and confirmations that do not need to interrupt the user experience.

Key differences

When in doubt:

Use a toast for quick, non-intrusive feedback.

Use an alert banner for important messages that require more attention but don’t block workflow.

Use a modal when displaying passive content that doesn’t require immediate action.

Use a dialog when the user must take action before continuing.