Components
Toast
One toast at a time — a new one rises in while the last one slips away.
A toast is a short message on a surface. Its tone picks the icon and colour — loading spins —
and it takes a title, an optional description and an optional action button. Pass a new id
to slide a new toast in and the old one away; keep the same id to change the text in place.
Preview
Deploy succeededLive in production.
Usage
<!-- include core.css + toast.css -->
<div class="dm-tst-slot" aria-live="polite">
<div class="dm-tst-t dm-tst-in" role="status">
<span class="dm-g"><!-- tone icon --></span>
<div class="dm-tx"><b>Deploy succeeded</b><span>Live in production.</span></div>
<div class="dm-acts">
<button class="dm-pill dm-sm dm-ghost">Undo</button>
<button class="dm-ib" aria-label="Dismiss"><!-- x --></button>
</div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
toast | ToastData | null | The toast to show, or null for none. |
onDismiss | (id) => void | Called by the close button. The toast leaves either way. |
toast.id | string | number | A new id slides a new toast in and the old one away. Keep it to change text in place. |
toast.tone | success | error | info | loading | Picks the icon and its colour. loading spins. |
toast.title | string | The bold first line. |
toast.description | string | The quieter line under the title. Crossfades when it changes. |
toast.action | { label; onClick; variant?: ghost | primary | ink; busy? } | A button before the close button, like Undo or Retry. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The card
sits on a surface with the toast shadow and its tone tints come from the theme tokens, so it reads
against the dark stage; in Soft the card and its buttons are rounder.