Scale — Banner

Install

Examples

Status variants

Click a trigger — the banner fades in full-width at the top of the page. Five semantic statuses set the icon and background colour. Banners are persistent: only one shows at a time, and it stays until the reader dismisses it with the close button (or Esc while focused).

Info

Warning

Negative

Positive

Mono

Options

Drop the trailing link with hide-link, or turn the link into a real anchor with link-href.

Without link

With link href

Guidelines

Usage

page-level announcements, system status, marketing messages, and dismissable notices. For alerts scoped to a card use Alert.

Do

Reserve banners for page-level, system-wide messages.
Show one at a time and let the reader dismiss it.
Keep it to a single line with one optional link.

Don’t

Don’t use a banner for card- or section-scoped messages — use Alert.
Don’t stack multiple banners on a page.
Don’t use it for transient confirmations — use Toast.

Accessibility

Role: the banner is role="status" labelled “Notification”, so it’s announced politely without stealing focus.
Dismiss: a close button removes it; Esc closes it while focused.
Not colour alone: each status pairs its colour with a distinct status icon.
Focus: the link and close button show the global keyboard focus ring.

Properties

Alert — an inline message scoped to a card or section.
Toast — transient feedback that auto-dismisses.

Banner