Overlay
Toast
Transient notifications that auto-dismiss. Service/hook-based API — place LlmToastContainer once in app root.
LlmToastProvider + useLlmToastDemo
Live PreviewReact
Toast requires
LlmToastProvider wrapping your app root. Use the useLlmToast() hook to show toasts imperatively.jsx
// App root:
<LlmToastProvider>
<App />
<LlmToastContainer position="bottom-right" />
</LlmToastProvider>
// In any component:
const { show } = useLlmToast();
show('Saved!', { variant: 'success' });
show('Error occurred', { variant: 'danger', duration: 8000 });
show('Persistent', { duration: 0 });API (Angular)
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'success' | 'warning' | 'danger' | 'info' | 'default' | Color scheme of the toast |
duration | number | 5000 | Auto-dismiss delay in ms. 0 = no auto-dismiss |
dismissible | boolean | true | Show a dismiss button |
position | 'top-right' | 'top-center' | 'bottom-right' | 'bottom-center' | 'bottom-right' | Container position (on LlmToastContainer) |
Import
ts
import { LlmToastProvider, LlmToastContainer, useLlmToast } from '@atelier-ui/angular';Accessibility
ARIA rolestatus / alert
| Key | Action |
|---|---|
| Tab | Reach the dismiss button inside the toast. |
| Enter / Space (on dismiss) | Close the toast early. |
- Default toasts live in an aria-live="polite" region — announced without interrupting.
- Danger-variant toasts use role="alert" so screen readers announce them immediately.
- Auto-dismiss respects prefers-reduced-motion and pauses while the toast is hovered or focused.
See the accessibility overview for the site-wide WCAG stance.