Components

Toast

A fixed bottom-right flash bar — the real pattern used for delete confirmations. Auto-dismisses after roughly 8 seconds in practice; wire that timer into the consuming app.

Basic

role="status" is the correct live-region role for a transient status message, so it doubles as the entire styling hook — no base class. The example below stays in document flow so it does not cover the page; [data-fixed] is what actually pins it bottom-right in a real app. The action and dismiss buttons are plain <button>s told apart by aria-label="Dismiss", an attribute the icon-only close control needs anyway.

Toast

Deleted "Call Mom"

Markup

<div role="status">
  <span>Deleted "Call Mom"</span>
  <button>Undo</button>
  <button aria-label="Dismiss">×</button>
</div>

Without an action

No action

Series created

Markup

<div role="status">
  <span>Series created</span>
  <button aria-label="Dismiss">×</button>
</div>

API

Element / attribute	Values	Notes
`[role="status"]`		Required base, on a `<div>`.
`> span`	string	The message. Required.
`> button`		Renders a destructive-colored action, typically "Undo".
`> button[aria-label="Dismiss"]`		The × control — the label is what tells it apart from the action button.
`data-fixed`	boolean	Pins the toast bottom-right of the viewport. Omit to stay in document flow.