Components / Base / Toast
B7 · Base
Toast
An archive action with an undo notice that stays for 5 seconds.
<div class="c-toast" role="status">
<span>Archived DOC-1042 in this example.</span>
<button type="button">Undo</button>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A destructive action can be undone.
- The notice should leave on its own.
When not to use
- The action cannot be undone. Ask in a dialog first.
- The notice must block the page.
Usage
<div class="c-toast" role="status">
<span>Archived DOC-1042 in this example.</span>
<button type="button">Undo</button>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| role=status | attribute | — | Announces the archive. |
| data-undo | button | — | Restores the row and hides the notice. |
| timeout | 5 s | 5 s | Hides the notice. The row stays archived if undo was not used. |
Keyboard
| Key | Action |
|---|---|
| Enter | On Archive, shows the notice. |
| Enter | On Undo, restores the row. |
Accessibility
- The notice is a status region.
- Undo is a button.
- The archived id is in the notice text.
Motion
- The notice appears and hides without a transition.
Pattern origin
Base feedback. Undo stays for 5 seconds.