Toast

molecules

Ephemeral notification — 4 variants (success/info/warning/error). Auto-dismiss 5s, queueable. Uses aria-live='polite' container.

ARIA Role: status

Demo

Saved successfully

Your changes are live.

Connection failed

Check your network.

Props

PropTypeRequiredDefaultDescription
variantToastVariantYes—
titlestringYes—

TypeScript Interface

interface ToastProps {
  id: string;
  variant: 'success' | 'info' | 'warning' | 'error';
  title: string;
  description?: string;
  action?: { label: string; onClick: () => void };
  duration?: number;
}

Assertions (NASA Rule 5)

  • [type]id must be unique (queueing uses Map<id,Toast>)(NASA Rule 5)
  • [aria]Container region has role='region' aria-live='polite'; each toast has role='status'(WCAG 4.1.3)

Usage

Import

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

Basic

<Toast />

With Variants

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