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

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"
/>

Persistence (auto-dismissed)

Pass a persistKey to remember dismissal in sessionStorage. The banner won't reappear in the same session after the user closes it.

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

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 in sessionStorage under this key.
wrapText	boolean	true	When false, truncate description with ellipsis.

Events

Event	Description
action	User clicked the trailing action button.
close	User clicked the close button.

Slots

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