Preview Updated 2026-05-10

Banner

Full-width announcement bar — 6 tones × 2 variants, dismissible and stickable.

Basic usage

Minimal form — a single line of announcement text. Banner defaults to variant="subtle": tinted background with accent text, the most restrained full-width prompt.

<CfBanner tone="info">
Scheduled maintenance tonight from 22:00 to 22:30; some features may be unavailable.
</CfBanner>

<CfBanner tone="info">
Scheduled maintenance tonight from 22:00 to 22:30; some features may be unavailable.
</CfBanner>

Six tones

tone — info (neutral notice) / success (completed) / warning (needs attention) / danger (urgent) / accent (marketing) / neutral (most restrained).

<CfBanner tone="info">info</CfBanner>
<CfBanner tone="success">success</CfBanner>
<CfBanner tone="warning">warning</CfBanner>
<CfBanner tone="danger">danger</CfBanner>
<CfBanner tone="accent">accent</CfBanner>
<CfBanner tone="neutral">neutral</CfBanner>

<CfBanner tone="info">info</CfBanner>
<CfBanner tone="success">success</CfBanner>
<CfBanner tone="warning">warning</CfBanner>
<CfBanner tone="danger">danger</CfBanner>
<CfBanner tone="accent">accent</CfBanner>
<CfBanner tone="neutral">neutral</CfBanner>

Solid variant

variant="solid" fills the background with the tone color and uses white text — the strongest visual weight, suitable for marketing announcements or urgent interruptions.

<CfBanner variant="solid" tone="accent" dismissible>
v2.0 is out — new themes and three density tiers
<template #action>
  <CfButton size="sm" variant="ghost">View update</CfButton>
</template>
</CfBanner>

<CfBanner
variant="solid"
tone="accent"
dismissible
action={<CfButton size="sm" variant="ghost">View update</CfButton>}
>
v2.0 is out — new themes and three density tiers
</CfBanner>

Close button + action slot

dismissible adds an × close button on the right — clicking it removes the banner and fires dismiss / onDismiss. The action slot / prop adds an action button between the text and the × (clean up / view / renew).

<CfBanner tone="warning" dismissible>
Storage at 86%; please clean up or upgrade your quota.
<template #action>
  <CfButton size="sm" variant="tertiary">Clean up</CfButton>
</template>
</CfBanner>

<CfBanner
tone="warning"
dismissible
action={<CfButton size="sm" variant="tertiary">Clean up</CfButton>}
>
Storage at 86%; please clean up or upgrade your quota.
</CfBanner>

API

Prop	Type	Default	Description
`tone`	`'info' \| 'success' \| 'warning' \| 'danger' \| 'accent' \| 'neutral'`	`'info'`	Semantic color
`variant`	`'subtle' \| 'solid'`	`'subtle'`	Visual mode
`dismissible`	`boolean`	`false`	Show the × close button
`icon`	`boolean`	`true`	Whether to show the leading icon (Vue: defaults to true, replaceable via the `#icon` slot; React: pass a node via the `icon` prop)
`sticky`	`boolean`	`false`	Whether to stick to the top (`position: sticky`)

Events: dismiss (React: onDismiss). Slots: default content, action, icon (Vue).