Banner

molecules

Full-width announcement bar — 4 variants (info/success/warning/error). Dismissible, with optional CTA. role='region' aria-label='Announcement'.

ARIA Role: region

Demo

New feature available

Try our new event scheduling tool.

Site maintenance tonight

Brief downtime expected between 02:00-03:00 ET.

Props

PropTypeRequiredDefaultDescription
variantBannerVariantYes—
titlestringYes—

TypeScript Interface

interface BannerProps {
  variant: 'info' | 'success' | 'warning' | 'error';
  title: string;
  description?: string;
  cta?: { label: string; href: string };
  onDismiss?: () => void;
  dismissible?: boolean;
}

Assertions (NASA Rule 5)

  • [type]variant required(NASA Rule 5)
  • [aria]role='region' aria-label='Announcement' on wrapper(WCAG 1.3.1)

Usage

Import

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

Basic

<Banner />

With Variants

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