Toast
Brief confirmation that appears at the bottom-start corner and dismisses after 5 seconds.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="row">
<button type="button" class="px-btn px-btn--secondary-gray" data-px-toast="Message archived" data-action="Undo">Show toast</button>
<button type="button" class="px-btn px-btn--secondary-gray" data-px-toast="Changes saved" data-tone="success">Success</button>
<button type="button" class="px-btn px-btn--secondary-gray" data-px-toast="Could not send invite" data-tone="danger">Danger</button>
</div>Usage
- One action at most; never the only path to a feature.
- Pauses on hover.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Static
What the JS renders.
Changes saved
<div class="px-toast px-toast--success" role="status" style="animation:none"><svg class="px-icon" aria-hidden="true">…</svg><span class="px-toast__msg">Changes saved</span><button type="button" class="px-toast__action">Undo</button><button type="button" class="px-icon-btn" aria-label="Dismiss"><svg class="px-icon" aria-hidden="true">…</svg></button></div>API reference
| Class / attribute | Type | Description |
|---|---|---|
PixelsUI.toast({ message, tone, action, onAction, duration }) | JS | Shows a toast. |
data-px-toast="message" data-tone data-action | attribute | Declarative trigger. |
Figma properties
Toast6 variants · page “Alerts & Notifications”Open
Brief confirmation that appears at the bottom (start corner on desktop) and dismisses after 5–8s; pause on hover. Announce with aria-live=polite. Only one action, never the only path to a feature. Mes…
| Property | Type | Values |
|---|---|---|
| Message | Text | “Message archived” |
| Action | Boolean | — |
| Action label | Text | “Undo” |
| Tone | Variant | Neutral Success Danger |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-toast-radius | radius-16 | 16px |
--px-toast-padding | spacing-16 | 16px |
--px-toast-gap | spacing-12 | 12px |
Accessibility
- Announced with aria-live="polite".