Alert
Inline status messages for success, warning, danger, and info states with optional title and dismiss support.
Heads up
Your message here.
API
All inputs and configuration options for zyra-alert.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'success' | 'info' | 'warning' | 'danger' | 'info' | Semantic color and icon |
title | string | - | Bold heading above the message body |
dismissible | boolean | false | Shows a close × button |
Tokens
CSS custom properties zyra-alert 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 |
|---|---|---|
Success background--zyra-color-alert-success-bg | var(--zyra-color-success-subtle) | Fill color of the success variant. |
Success border--zyra-color-alert-success-border | var(--zyra-color-success-border-color) | Border color of the success variant. |
Success color--zyra-color-alert-success-color | var(--zyra-color-success-foreground) | Title, body, and dismiss-button color for the success variant; also the icon’s fill background. |
Warning background--zyra-color-alert-warning-bg | var(--zyra-color-warning-subtle) | Fill color of the warning variant. |
Warning border--zyra-color-alert-warning-border | var(--zyra-color-warning-border-color) | Border color of the warning variant. |
Warning color--zyra-color-alert-warning-color | var(--zyra-color-warning-foreground) | Title, body, and dismiss-button color for the warning variant; also the icon’s fill background. |
Danger background--zyra-color-alert-danger-bg | var(--zyra-color-danger-subtle) | Fill color of the danger variant. |
Danger border--zyra-color-alert-danger-border | var(--zyra-color-danger-border-color) | Border color of the danger variant. |
Danger color--zyra-color-alert-danger-color | var(--zyra-color-danger-foreground) | Title, body, and dismiss-button color for the danger variant; also the icon’s fill background. |
Info background--zyra-color-alert-info-bg | var(--zyra-color-info-subtle) | Fill color of the info variant. |
Info border--zyra-color-alert-info-border | var(--zyra-color-info-border-color) | Border color of the info variant. |
Info color--zyra-color-alert-info-color | var(--zyra-color-info-foreground) | Title, body, and dismiss-button color for the info variant; also the icon’s fill background. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders with role="alert" so the message is announced immediately by screen readers
- For non-urgent messages, use role="status" via a custom wrapper instead
- Dismiss button has an accessible aria-label="Dismiss alert"