Alert

zyra-alert

Inline status messages for success, warning, danger, and info states with optional title and dismiss support.

API

All inputs and configuration options for zyra-alert.

PropTypeDefaultDescription
variant'success' | 'info' | 'warning' | 'danger''info'Semantic color and icon
titlestring-Bold heading above the message body
dismissiblebooleanfalseShows a close × 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"