Toast
Transient notifications for confirmations, warnings, and system messages without interrupting the flow.
API
All inputs and configuration options for zyra-toast-container.
| Prop | Type | Default | Description |
|---|---|---|---|
toast.success() | (title, options?) => void | - | Show a success toast via ZyraToastService |
toast.info() | (title, options?) => void | - | Show an info toast |
toast.warning() | (title, options?) => void | - | Show a warning toast |
toast.error() | (title, options?) => void | - | Show an error toast |
options.description | string | - | Secondary body text below the title |
options.duration | number | 4000 | Auto-dismiss delay in milliseconds |
Tokens
CSS custom properties zyra-toast-container reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-color-toast-bg | tuned per theme | Fill color of every toast, regardless of variant. |
Border--zyra-color-toast-border | tuned per theme | Border color of the default variant (non-status toasts). |
Default icon background--zyra-color-toast-default-icon-bg | var(--zyra-color-surface-inset) | Icon fill color for the default (non-status) variant. |
Default icon text--zyra-color-toast-default-icon-text | var(--zyra-color-foreground) | Icon glyph color for the default variant. |
Success border--zyra-color-success-border-color | var(--zyra-color-success-border) | Border color of a success toast. |
Success icon--zyra-color-toast-success-icon-bg | var(--zyra-color-success-foreground) | Icon fill color for a success toast — paired with --zyra-color-toast-success-icon-text (var(--zyra-color-on-success)). |
Danger border--zyra-color-danger-border-color | var(--zyra-color-danger-border) | Border color of an error toast. |
Danger icon--zyra-color-toast-danger-icon-bg | var(--zyra-color-danger-foreground) | Icon fill color for an error toast — paired with --zyra-color-toast-danger-icon-text (var(--zyra-color-on-danger)). |
Warning border--zyra-color-warning-border-color | var(--zyra-color-warning-border) | Border color of a warning toast. |
Warning icon--zyra-color-toast-warning-icon-bg | var(--zyra-color-warning-foreground) | Icon fill color for a warning toast — paired with --zyra-color-toast-warning-icon-text (var(--zyra-color-on-warning)). |
Info border--zyra-color-info-border-color | var(--zyra-color-info-border) | Border color of an info toast. |
Info icon--zyra-color-toast-info-icon-bg | var(--zyra-color-info-foreground) | Icon fill color for an info toast — paired with --zyra-color-toast-info-icon-text (var(--zyra-color-on-info)). |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Toast container uses role="region" with an aria-label for screen reader announcement
- Success/info toasts use aria-live="polite"; error toasts use aria-live="assertive"
- Each toast includes a visible dismiss button with an accessible label
- Toasts do not auto-dismiss during keyboard navigation to prevent losing context