Back to componentszyra-alert
Alert
Inline status messages for success, warning, danger, and info states with optional title and dismiss support.
Component preview
Explore the available states and the real library behavior for this component.
zyra-alert Playground
Control every input live and see the result instantly
Controls
title
boolean inputs
variant
Preview
Heads up
This is an example alert message. Use it to inform, warn, or confirm.
Generated Code
<zyra-alert
title="Heads up"
>
Your message here.
</zyra-alert>All Variants
Changes saved
Your profile has been updated successfully.
New version available
zyra-ng-ui v1.5.31 is ready to install.
Storage almost full
You have used 90% of your storage quota.
Deployment failed
Build step failed. Check the logs for more details.
Dismissible
Ready to publish
All checks passed. You can publish this release.
Your session will expire in 5 minutes.
Without Title
Two-factor authentication is recommended for your account.
You do not have permission to perform this action.
Copy-paste example
Drop this into your Angular standalone component and it works out of the box.
import { Component } from '@angular/core';
import { ZyraAlert } from 'zyra-ng-ui';
@Component({
selector: 'app-demo',
standalone: true,
imports: [ZyraAlert],
template: `
<zyra-alert
variant="success"
title="Saved"
[dismissible]="true"
>
Your changes have been saved.
</zyra-alert>
`,
})
export class DemoComponent {}Variants
All the visual modes and states available for this component.
successConfirmation or completed action (green)
infoInformational context or tips (blue)
warningCautionary message requiring attention (amber)
dangerError or destructive state notice (red)
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 x button |
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"