Banner

A prominent notification component that spans the full width of the container, typically used for important system-wide messages or announcements.

Variants

With Action Button

Dismissible

Sticky Banner

Sticky banners remain at the top of the viewport when scrolling. Scroll down to see the effect.

Scroll down to see the sticky banner in action.

This is placeholder content to demonstrate scrolling. The sticky banner should remain visible at the top of the viewport as you scroll through this content area.

Props

Name	Type	Default	Description
`variant`	`'info' \| 'warning' \| 'error'`	`'info'`	Visual style variant of the banner
`message*`	`string`	-	Banner message text
`actionLabel`	`string`	-	Label for action button
`onAction`	`() => void`	-	Action button click handler
`dismissible`	`boolean`	`true`	Whether banner can be dismissed
`onDismiss`	`() => void`	-	Callback when banner is dismissed
`sticky`	`boolean`	`false`	Whether banner sticks to top on scroll

Usage Guidelines

When to use

•For system-wide messages that affect the entire application
•For important announcements or updates that users should not miss
•For critical errors or warnings that require immediate attention
•For informational messages about ongoing processes or maintenance

Best practices

•Keep messages concise and actionable
•Use appropriate variant based on message severity (info, warning, error)
•Provide clear action buttons for next steps when applicable
•Make banners dismissible unless they contain critical information
•Use sticky banners sparingly to avoid obscuring content

Accessibility

•ARIA role: banner for semantic meaning
•Clear visual indicators through color and icons
•Keyboard accessible with Tab navigation and Enter/Space for actions
•Dismissible close button includes aria-label
•High contrast colors meet WCAG AAA requirements

Do's and Don'ts

✓ Do

•Use clear, concise messaging that explains the situation
•Match the variant to the severity (info for updates, error for critical issues)
•Provide actionable next steps with clear button labels
•Allow users to dismiss non-critical banners

✗ Don't

•Don't use vague messages without context or explanation
•Don't stack multiple banners at once (prioritize the most important)
•Don't use error variant for non-critical messages
•Don't make critical safety banners dismissible

Related Components

Alert

For contextual feedback messages

Toast

For temporary notifications

Badge

For inline status indicators