Banner

Communicate important status information with clear emphasis and optional dismissal.

View on GitHub
View on GitHub

API reference

BannerProps

titlestring—

Name: title

Description: Visible banner heading text announced to assistive technology.

Type: string

Default: —

variant'info' | 'success' | 'warning' | 'error' | 'critical''info'

Name: variant

Description: Visual style and default live region behavior for the banner.

Type: 'info' | 'success' | 'warning' | 'error' | 'critical'

Default: 'info'

childrenReactNode—

Name: children

Description: Optional supporting message content displayed under the title.

Type: ReactNode

Default: —

isExposedbooleantrue

Name: isExposed

Description: Controls visibility of the banner in controlled usage.

Type: boolean

Default: true

onClose() => void—

Name: onClose

Description: Enables dismiss control and fires when user closes the banner.

Type: () => void

Default: —

ariaLive'polite' | 'assertive' | 'off'—

Name: ariaLive

Description: Optional override for live region politeness.

Type: 'polite' | 'assertive' | 'off'

Default: —

ariaAtomic'true' | 'false'—

Name: ariaAtomic

Description: Optional override to announce full banner region updates.

Type: 'true' | 'false'

Default: —

classNamestring''

Name: className

Description: Additional class names for custom styling.

Type: string

Default: ''

  • WCAG 1.3.1 Info and Relationships: Semantic heading and grouped message content
  • WCAG 2.1.1 Keyboard: Dismiss action uses native button semantics
  • WCAG 4.1.2 Name, Role, Value: Programmatic live region attributes are exposed
  • WCAG 4.1.3 Status Messages: Variant defaults map to appropriate announcement behavior
Open Banner stories