Banner

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 button is a native HTML <button> element, and the dismiss and action buttons use the Pluma Button component.

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.