Banner
ImplementedFull-width announcement bar — 5 variants (info/success/warning/error/solid). Dismissible, with optional CTA. role='region' aria-labelledby={titleId}. The `solid` variant is brand-aligned (bg-ep-btn-primary + white text + animated icon + CTA button) for high-visibility system states (admin impersonation, maintenance mode). Composes the Alert molecule's ALERT_VARIANT_STYLES contract for the tinted variants (Alert is the single source of truth; Wave 3 Tier-1 L4-M3) and auto-adapts in dark mode.
components/organisms/Banner/Banner.tsxFull-width page banner.
Banner
Feedback & Overlay — Family 4
Full-width page banner.
Usage
Full-width page banner. Refer to the DS component index for full prop details.
import { Banner } from '@epasslive/design-system'Banner vs. Alert
Banner is the page-level counterpart of the inline Alert molecule: it spans the full layout width for page-level announcements, while Alert sits inside a form, panel, or card next to the content it describes. Both expose the same four variants (info / success / warning / error) — Banner composes the Alert variant contract (ALERT_VARIANT_STYLES) as its single source of truth, so a variant-token change in Alert also restyles Banner.
Props
Banner
variantBannerVariant—titlestring—descriptionstring—Secondary/descriptive text.
actionBannerAction—Action node or handler.
onDismiss() => void—Called when the element is dismissed.
iconReact.ReactNode—Icon node rendered by the control.
sizeBannerSize'md'Visual size preset.
<Banner />Accessibility
Type
1 ruleARIA
1 ruleUsage
Import
import { Banner } from "@epasslive/design-system"Example 1
<Banner />Example 2
<Banner variant="default" />Anti-patterns
— Do not hardcode data in molecules
— Avoid complex business logic in molecules