Overlay
Toast
Transient notifications that auto-dismiss. Service/hook-based API — place LlmToastContainer once in app root.
Toast (service / hook + LlmToastContainer)Demo
Live PreviewReact
Toast requires
LlmToastProvider wrapping your app root. Use the useLlmToast() hook to show toasts imperatively.html
// Place the container once (e.g. in app root template):
// <llm-toast-container position="bottom-right" />
// In any component — inject the service, no provider needed:
import { LlmToastService } from '@atelier-ui/angular';
private readonly toast = inject(LlmToastService);
this.toast.show('Saved!', { variant: 'success' });
this.toast.show('Error occurred', { variant: 'danger', duration: 8000 });
this.toast.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.