AlertGroup

organisms

Stacked alerts container. Manages multiple alerts with auto-dismiss and queue.

ARIA Role: region

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
`alerts`	`Alert[]`	Yes	`—`	Alert items to display
`maxVisible`	`number`	No	`3`	Maximum visible alerts
`autoDismiss`	`boolean`	No	`true`	Auto-dismiss after timeout
`dismissTimeout`	`number`	No	`5000`	Auto-dismiss timeout (ms)
`onDismiss`	`(id: string) => void`	Yes	`—`	Dismiss handler

TypeScript Interface

interface AlertGroupProps {
  alerts: Alert[];
  maxVisible?: number;
  autoDismiss?: boolean;
  dismissTimeout?: number;
  onDismiss: (id: string) => void;
}

Assertions (NASA Rule 5)

[aria]Container must have role='region' with aria-label(WCAG 1.3.1)
[aria]Stack alerts in document order; latest at top(WAI-ARIA APG)

Usage

Import

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

Basic

<Alertgroup />

With Variants

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