Banner

Contextual message spanning the top of a section or page. Four status variants (info, success, warning, danger), three sizes (small, medium, large). CTA actions and the dismiss button are both optional. Use for page-level announcements, system status, or contextual help.

a11y (built in): the announcement role is part of the markup contract — role="status" for info/success, role="alert" for warning/danger — and the controller never sets it for you, so a banner injected into a live page announces itself only if you wrote the role. Dismiss is a real <button> with an aria-label and a :focus-visible outline; it hides the banner and fires lb-banner-dismiss so you can persist the choice. CTAs are ordinary buttons sitting after the message in DOM order.

Usage: Mark with role="status" for info/success, role="alert" for warning/danger. Actions go in .lb-banner__actions; the close button is optional.


Banner Demo

Default — close only
Information This is an informational banner.
With single CTA (no close)
Saved Your changes are published.
With CTA + close
New version available Some features may be outdated.
With two CTAs
Cookies We use cookies to improve your experience.
Large — actions stack under body
Unable to save changes Check your connection and try again. If the problem persists, contact support.
Small — close only
Inline warning