Alert

molecules

Inline alert (success, error, warning, info) — distinct from Banner. Used for form validation, system messages.

ARIA Role: alert

Demo

Heads up

Your account is pending verification.

Payment received

$120.00 USD has been processed.

Quota almost reached

You have used 90% of your monthly events.

Payment failed

We could not charge your card on file.

Props

Prop	Type	Required	Default	Description
`variant`	`'success' \| 'error' \| 'warning' \| 'info'`	Yes	`—`	Alert type
`title`	`string`	No	`—`	Alert title
`children`	`React.ReactNode`	Yes	`—`	Alert content
`dismissible`	`boolean`	No	`false`	Show dismiss button
`onDismiss`	`() => void`	No	`—`	Dismiss handler

TypeScript Interface

interface AlertProps {
  variant: 'success' | 'error' | 'warning' | 'info';
  title?: string;
  children: React.ReactNode;
  dismissible?: boolean;
  onDismiss?: () => void;
}

Assertions (NASA Rule 5)

[aria]role='alert' (or role='status' for non-urgent) is required(WCAG 4.1.3)
[aria]aria-live='assertive' for errors, 'polite' for info(WAI-ARIA APG)
[validation]Message text must be present (not empty) when shown(NASA Rule 5)

Usage

Import

import { Alert } from '@epasslive/design-system'

Basic

<Alert />

With Variants

<Alert variant="primary" size="md" />