Prepared Docs

Banner from @prepared911/ui-core is a site-wide alert strip. The component renders icons, titles, descriptions, and optional actions; your job is to choose the right semantic type, keep copy scannable, and pause auto-dismiss timers when users need more time.

What the component handles

Variant visuals. Each BannerType has matching color, icon, and text treatments.
Alert semantics. The root element renders with role="alert" and a localized aria-label.
Dismiss button. When dismissible with onDismiss, the close button exposes an accessible title.
Pause on interaction. onPause and onResume wire hover and focus handlers for auto-dismiss timers.

What you must provide

Matching severity. Use Critical only for actionable failures; use Warning for degraded states; use Success for recovery confirmations.
Scannable copy. Keep titles short; use descriptions for secondary detail only.
Non-color cues. Icon plus title wording must communicate severity without relying on color alone.
Action verbs on CTAs. Labels should read as actions ("Refresh screen", "Learn more").

Keyboard behavior

Tab / Shift+Tab reach the CTA and dismiss button in visual order.
Enter / Space activate the focused button.
Hover / focus on the banner pauses auto-dismiss timers when wired through onPause / onResume.

Timing adjustable (WCAG 2.2.1)

When using useAutoDismiss, pass the returned pause and resume handlers to the Banner so users can read the message without the timer expiring while they hover or focus the banner.

Banner / Usage

Breadcrumb / Usage

What the component handles

What you must provide

Keyboard behavior

Timing adjustable (WCAG 2.2.1)

What the component handles

Variant visuals. Each BannerType has matching color, icon, and text treatments.
Alert semantics. The root element renders with role="alert" and a localized aria-label.
Dismiss button. When dismissible with onDismiss, the close button exposes an accessible title.
Pause on interaction. onPause and onResume wire hover and focus handlers for auto-dismiss timers.

What you must provide

Matching severity. Use Critical only for actionable failures; use Warning for degraded states; use Success for recovery confirmations.
Scannable copy. Keep titles short; use descriptions for secondary detail only.
Non-color cues. Icon plus title wording must communicate severity without relying on color alone.
Action verbs on CTAs. Labels should read as actions ("Refresh screen", "Learn more").

Keyboard behavior

Tab / Shift+Tab reach the CTA and dismiss button in visual order.
Enter / Space activate the focused button.
Hover / focus on the banner pauses auto-dismiss timers when wired through onPause / onResume.

Timing adjustable (WCAG 2.2.1)

When using useAutoDismiss, pass the returned pause and resume handlers to the Banner so users can read the message without the timer expiring while they hover or focus the banner.

Banner / Usage

Breadcrumb / Usage

What the component handles

What you must provide

Keyboard behavior

Timing adjustable (WCAG 2.2.1)