Banner

An inline, page-level callout for messages that belong in the document flow (not a transient toast). Four variants — info, success, warning, danger — each rendering a wash background, an edge border, and an accent-ink leading icon, all driven by semantic tokens. The state colors map to OCSS conformance: success = MUST / pass, warning = SHOULD, danger = MUST-NEVER. danger uses role="alert" (assertive); the others use role="status" (polite). Optional title, actions, and a dismiss button. Light/dark resolve automatically.

Variants

With actions

Dismissible

Title only

Body only (no title)

No icon