Banner

SBanner is a full-width strip that speaks for the whole application — "you are offline", "a new version is available", "your trial ends in 3 days" — and usually carries actions and a dismiss control. That is what separates it from SAlert: an alert sits in the content flow and describes the thing next to it, while a banner spans the app width, normally above or below the app bar, and belongs to the page as a whole. Both share the same status vocabulary (info/positive/warning/negative) and the same announcement rule: negative interrupts the screen reader (role="alert"), every other variant is announced politely (role="status").

Variants

The default variant is neutral — an announcement that reports no status and therefore carries no icon. The status variants add the icon of the matching SAlert status.

We use cookies to keep you signed in.

A new version of the app is available.

All changes have been published.

Your trial ends in 3 days.

You are offline — changes are saved locally.

<template>
  <SBanner>We use cookies to keep you signed in.</SBanner>
  <SBanner variant="warning">Your trial ends in 3 days.</SBanner>
  <SBanner variant="negative">You are offline — changes are saved locally.</SBanner>
</template>

A banner is square by default: it runs from edge to edge of the application, where rounded corners look like a mistake. Pass :square="false" for a banner inset into the content, bordered to outline it in the variant color, and color to take the accent from the palette.

Outlined in the variant color.

Inset into the content, with a palette accent.

<template>
  <SBanner
    variant="info"
    bordered
  >
    Outlined in the variant color.
  </SBanner>
  <SBanner
    variant="info"
    :square="false"
    color="indigo"
  >
    Inset into the content, with a palette accent.
  </SBanner>
</template>

Title and actions

The title prop (or the title slot) sits above the message, and the actions slot holds the buttons. They stay at the end of the row on a wide screen and move under the message below the sm breakpoint, where a squeezed row of buttons would be hard to hit.

A new version is available

Reload the page to get the latest build.

<template>
  <SBanner
    variant="info"
    title="A new version is available"
  >
    Reload the page to get the latest build.
    <template #actions>
      <SButton
        variant="ghost"
        size="sm"
      >
        Later
      </SButton>
      <SButton size="sm">Reload</SButton>
    </template>
  </SBanner>
</template>

Dismissing

closable adds a close button: it hides the banner and emits close. Bind v-model:visible to keep the decision — an application that stores it can restore the banner on the next visit. The button's accessible name comes from the locale dictionary (close); override it on one instance with closeLabel, or replace the dictionary entry through ConfigProvider. The close slot replaces the button entirely and receives the close handler.

Your trial ends in 3 days

Upgrade to keep the workspace after the trial.

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(true)
</script>

<template>
  <SBanner
    v-model:visible="visible"
    variant="warning"
    title="Your trial ends in 3 days"
    closable
    close-label="Dismiss the trial notice"
    @close="rememberDismissal()"
  >
    Upgrade to keep the workspace after the trial.
    <template #actions>
      <SButton size="sm">Upgrade</SButton>
    </template>
  </SBanner>
</template>

Sticky

sticky pins the banner to the top of its scroll container, so an app-wide message stays in view while the page scrolls under it. The example below scrolls inside its own box; in an application the banner is usually the first child of the page scroller.

You are viewing an archived project.

Scroll inside this box — the banner stays on top.

<template>
  <div class="page-scroller">
    <SBanner
      variant="info"
      sticky
    >
      You are viewing an archived project.
      <template #actions>
        <SButton
          variant="ghost"
          size="sm"
        >
          Leave archive
        </SButton>
      </template>
    </SBanner>
    <main>…</main>
  </div>
</template>

API

Props

Name	Type	Default	Description
variant	| "info" | "positive" | "negative" | "warning" | "neutral"	"neutral"	Semantic variant: neutral/info/positive/warning/negative. neutral by default — a banner usually carries an announcement, while a status is the exception.
color	string	undefined	Accent color: a name from the palette (primary/teal/teal-10). Overrides the variant color.
title	string	undefined	Title above the message (can be replaced with the title slot).
icon	string | false	undefined	Icon (a registry name or a raw SVG path). Overrides the variant's status icon; false leaves the banner without one. The icon slot takes precedence.
closable	boolean	false	Shows the close button: it hides the banner and emits close.
close-label	string	undefined	Accessible name of the close button (defaults to the locale dictionary).
sticky	boolean	false	Sticks the banner to the top of its scroll container while the page scrolls under it.
bordered	boolean	false	Outlines the banner with a border in the variant color.
square	boolean	true	Square corners. Enabled by default: a banner spans the whole application width, and rounded corners against the window edges look like a mistake. Set :square="false" for a banner inset into the content.
visible	boolean	true	Whether the banner is shown. The close button hides it by itself; v-model:visible brings it back, so an application that remembers the dismissal restores the state on the next visit.

Events

Name	Signature	Description
update:visible	(value: boolean) => void	Emitted when visible changes. Used for two-way binding (v-model:visible).
close	() => void	The close button was clicked.

Slots

Name	Description
default	Message.
title	Title (alternative to the title prop).
icon	Custom icon (replaces the status icon).
actions	Actions at the end of the row; they wrap under the message on narrow screens.
close	Close control instead of the built-in button; closable still has to be set.