Toast
An independent React adapter where Ark UI and Zag manage the queue, live region, timing, pause, and focus.
Design
Functional preview
Running with the independent Ark UI adapter and Zag behavior.
Loading functional preview…
Anatomy
Alterações salvas
Seu rascunho foi atualizado.
1 Icon · 2 Content · 3 Title · 4 Description · 5 Actions (Button ghost/sm) · 6 Close
Demo
Usage
When to use
- A completed action needs brief confirmation without blocking the task.
- Feedback may disappear without removing information required to continue.
When not to use
- The message requires a decision, critical confirmation, or correction before continuing.
- Content must remain associated with a field or a specific page context.
When to choose this output
Choose this adapter in projects that adopted Ark UI and Zag as their behavioral architecture. Do not import it into the shadcn/Base UI output.
Implementation
- Status
- Beta
- Distribution
- Source adapter
Adapter source
packages/react/src/ark/toast.jsx
import {
ToastRegion,
showToast,
} from '@tis/react/ark/toast'Accessibility
Accessibility
Accessibility
Success, warning, and info are announced by a role="status" region. Error uses role="alert". The runtime does not move focus; hover and focus pause the timer; Escape dismisses the toast containing focus.
Output responsibility
Preserve the Ark/Zag semantics and validate Escape, outside interaction, ARIA relationships, and focus return.
Validation evidence
Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.