Toast

Created by dsgn.toast()

One action without a title sits beside the text (layout inline). With a title or several actions the buttons go under the text (layout stack), as they always do on phones.

<div class="dsgn-cluster">
  <button class="dsgn-button" data-variant="subtle" data-intent="neutral" data-demo-toast="success">Show a toast</button>
  <button class="dsgn-button" data-variant="subtle" data-intent="neutral" data-demo-toast="undo">Toast with Undo</button>
  <button class="dsgn-button" data-variant="subtle" data-intent="neutral" data-demo-toast="danger">Error toast</button>
  <button class="dsgn-button" data-variant="subtle" data-intent="neutral" data-demo-toast="stack">Buttons under the text</button>
</div>

Usage

Markup (dsgn.js writes it):

Short, non-blocking confirmation of something the user just did. Raised surface with the overlay shadow, intent icon, optional actions and a dismiss button, 448 px wide. Layout inline (default for one action without a title): the action sits beside the text. Layout stack (default with a title or more actions; on phones always): the buttons sit under the text, the first one subtle, the others ghost. Stacks at the bottom end of the viewport (safe-area aware), newest last, at most 3 at a time. Announced by one polite live region; danger toasts carry role="alert" (assertive). Auto-hides after 6 s (10 s with an action); the timer pauses while the pointer is over the toast or focus is inside it. Never put the only way to do something in a toast.

Details

Classes

.dsgn-toast-region .dsgn-toast .dsgn-icon .dsgn-toast-body .dsgn-toast-title .dsgn-toast-actions .dsgn-toast-close

Tokens used

--dsgn-accent-text --dsgn-blur-chrome --dsgn-border --dsgn-border-width --dsgn-control-gap --dsgn-control-height --dsgn-control-pad-x --dsgn-control-pad-y --dsgn-danger-text --dsgn-duration --dsgn-ease --dsgn-font-sans --dsgn-font-size-body-s --dsgn-font-weight-semibold --dsgn-line-height-body-s --dsgn-neutral-text --dsgn-radius-l --dsgn-shadow-overlay --dsgn-space-16 --dsgn-space-2 --dsgn-space-4 --dsgn-space-64 --dsgn-space-8 --dsgn-success-text --dsgn-surface-chrome --dsgn-text --dsgn-warning-text

In Figma

Toast

Import alone

dsgn.systems/components/toast.css