1 viewer
Component · Feedback
Toast
Transient notification with optional auto-dismiss and close affordance.
- Category
- Feedback
- Slots
- 5
- States
- 7
- Writer
- Shared
Preview
Atomic Sync Completed
32KB crystal package synced across 8 peers in 18ms.
<Toast
body="32KB crystal package synced across 8 peers in 18ms."
dismissible={true}
intent="success"
title="Atomic Sync Completed"
/>Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-toast |
| icon | .primitive-toast__icon |
| title | .primitive-toast__title |
| body | .primitive-toast__body |
| close | .primitive-toast__close |
- Modifier
- primitive-toast--{intent}
- State attribute
- data-intentfrom the intent prop
- Role
- status
- Role by state
- error → alert
- Hydration markers
- data-cre8-toast, data-cre8-toast-dismiss
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-semantic | ready |
| terminal | terminal-text | planned |
Accessibility
Notifications announce politely by default, assertively for errors, and stay hidden from assistive tech until they have content.
- Each toast exposes status or alert semantics with an appropriate live region.
- Dismissible toasts expose a labelled close button.
- Empty toast shells stay out of the accessibility tree until a title or body is present.