Banner

Full-width status block that lives at the top of a page or section. Use it to communicate page-level state — outcomes of actions, persistent warnings, read-only context — without blocking the UI.

Heads up

Connecting to the data source may take a moment.

Saved

Your changes are live.

Verify before publishing

One asset is missing required data.

Sync failed

We couldn't reach the integration. Try again or contact support.

Incomplete

3 fields still need values before you can submit.

<Banner variant="info" title="Heads up" description="Connecting to the data source may take a moment." />
<Banner variant="success" title="Saved" description="Your changes are live." />
<Banner variant="warning" title="Verify before publishing" description="One asset is missing required data." />
<Banner variant="error" title="Sync failed" description="We couldn't reach the integration." />

When to reach for a banner

• System-level feedback — outcome of a page-level action (form submitted, session expired)
• Persistent warnings — conditions that stay visible until resolved (missing required data, stale sync)
• Top-of-page context — read-only info that affects the entire page (snapshot mode, trial expiring)

When not to use a banner

• Transient confirmations ("Saved", "Copied to clipboard") → use Toaster instead
• Decisions that need a yes/no answer → use Modal
• Inline field errors → use the form field's own error state, not a banner
• Inside cards or forms — banners belong at the top of a page or section, not buried inline
• Stacked banners — show only the highest-priority message; multiple banners compete for the same role and dilute each other. When a section genuinely carries several standing notices, fold them (see Collapsible) so only the titles stack

Variants

Each variant maps to a clear semantic intent. Pick by the message you're conveying, not the colour you want.

Variant	Use for
error	Critical failure — action is blocked or data is lost
warning	Something may go wrong — user should take notice
missing	Required data is absent — submission may be incomplete
success	Action completed — confirms a positive outcome
info / default	Neutral information — no urgency or sentiment

Title only

Read-only mode

<Banner variant="info" title="Read-only mode" />

With action

The action prop renders a trailing link-style button. Listen on @action.

Pending review

3 reports are waiting on your approval.

<Banner
  variant="warning"
  title="Pending review"
  description="3 reports are waiting on your approval."
  action="Review"
  @action="goToReview"
/>

System style (single-line, centered)

A 40px-tall, single-line variant for thin status strips at the top of a page. Use it when the message is brief and scannable — session timers, snapshot indicators, environment markers. Reach for the default style instead when you need a description line for context or next steps.

You are viewing a snapshot from 2026-04-29.

<Banner variant="info" style="system" description="You are viewing a snapshot from 2026-04-29." />

Truncate long descriptions

Pass :wrap-text="false" to clip the description with an ellipsis instead of wrapping.

Long description

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<Banner
  variant="info"
  title="Long description"
  description="Lorem ipsum dolor sit amet…"
  :wrap-text="false"
/>

Collapsible

Pass collapsible to fold the banner down to its title row. The title becomes the toggle; the description (prop or slot) is removed from the DOM while folded, so links inside it stay out of the tab order. Reach for this when a page carries several standing notices and the detail is reference material rather than something the user must read every visit — the titles stay scannable, the bodies stay one click away.

Folded is the default; pass default-expanded to start open. badge puts a count next to the title, coloured from the banner's variant.

Give a collapsible banner a persistKey and the fold sticks: what the user opens stays open for the rest of the browser session, and folds again next time they sign in. Without one the banner re-folds on every page load.

<Banner
  variant="warning"
  title="3 assets default to national average factors"
  description="For US, Australia and Canada…"
  :badge="3"
  collapsible
  :closeable="false"
/>

A title is required for a collapsible banner — it is the only thing left when the banner is folded.

Persistence (session-scoped)

persistKey is the banner's identity in sessionStorage, and both bits of user state hang off it: the banner won't reappear in the same session after the user closes it, and a collapsible one stays folded or unfolded as the user last left it. Pick a key that names the message, not the page — the same notice shown in two places should share one.

<Banner
  variant="info"
  title="Heads up"
  description="A new feature is available."
  persistKey="new-feature-2026-04"
/>

Keys are stored under an aurora:banner: prefix, and clearPersistedBanners() (exported alongside Banner) drops all of them at once. sessionStorage belongs to the browser tab, not to the account, so a host app has to call this when someone signs in — otherwise the previous user's dismissals and folds greet the next one. The web app does this from its user store.

Custom icon and description slots

Override the leading icon or rich-format the description via slots.

<Banner variant="info" title="Custom slots">
  <template #icon>
    <Icon name="rocket" :size="16" />
  </template>
  <template #description>
    Read the <a href="/changelog">changelog</a> for full details.
  </template>
</Banner>

Props

Prop	Type	Default	Description
variant	'info' | 'success' | 'warning' | 'error' | 'missing' | 'default'	required	Semantic color and icon.
title	string	—	Title line.
description	string	—	Body text. Use the description slot for rich content.
style	'default' | 'system'	'default'	'system' lays out title and description on the same line, centered.
action	string	—	Trailing action label. Listen on @action to handle clicks.
closeable	boolean	true	Show the close button. Listen on @close.
persistKey	string	—	Persist dismissal — and, when collapsible, the fold — in sessionStorage under this key.
wrapText	boolean	true	When false, truncate description with ellipsis.
collapsible	boolean	false	Fold the body behind the title. The title row becomes the toggle.
defaultExpanded	boolean	false	Start a collapsible banner open.
badge	number	—	Count pill next to the title, coloured from variant.

Events

Event	Description
action	User clicked the trailing action button.
close	User clicked the close button.
toggle	Collapsible banner was folded or unfolded. Payload is the new expanded state.

Slots

Slot	Description
icon	Override the default semantic icon.
description	Rich content for the body (overrides the description prop).