Banner

Banners prominently communicate contextual information.

Structure

The Banner component renders as a <div> with role="alert". When using the title and description APIs, the title uses a <p> element styled as a heading, and the description uses a <p> element. Custom children render directly in the banner content area. The close, dismiss and action buttons all use the Pluma Button component, which renders a native HTML <button> element.

ARIA

table
Element	Attribute	Description
Banner container	`role="alert"`	Identifies the Banner as a live region used to communicate time-sensitive information, causing screen readers to announce its content when it appears.
Close button	`aria-label="Close"`	Provides an accessible name for the icon-only close button.

Keyboard

Button

table
Key	Function
`Enter`/`Space`	Activates the focused button (dismiss, action, or close).
`Tab`	Moves focus to the next focusable element within or after the banner.
`Shift`+`Tab`	Moves focus to the previous focusable element.

Banner

Structure

ARIA

Keyboard

Button

On this page