SBanner <s-banner>

import { SBanner } from 'polaris-vue-elements'

Example

Your changes have been saved.We couldn't process the payment. Please try again.Retry

<script setup>
import { ref } from 'vue'
import { SBanner, SButton, SText } from 'polaris-vue-elements'

const showCritical = ref(true)
</script>

<template>
  <!-- SBanner needs default-slot content — a `heading` alone renders an empty
       banner. See docs/guide/quirks.md. -->
  <SBanner heading="Order updated" tone="success">
    <SText>Your changes have been saved.</SText>
  </SBanner>

  <!-- dismissible banners fire `dismiss` immediately, then `afterhide` once any
       animation completes; drive `hidden` (or v-if, as here) from that event. -->
  <SBanner
    v-if="showCritical"
    heading="Something went wrong"
    tone="critical"
    dismissible
    @dismiss="showCritical = false"
  >
    <SText>We couldn't process the payment. Please try again.</SText>
    <template #secondary-actions>
      <SButton variant="secondary">Retry</SButton>
    </template>
  </SBanner>
</template>

Props

Prop	Type	Description
dismissible	boolean	Determines whether the close button of the banner is present. When the close button is pressed, the dismiss event will fire, then hidden will be true, any animation will complete, and the afterhide event will fire.
heading	string	The title of the banner.
hidden	boolean	Determines whether the banner is hidden. If this property is being set on each framework render (as in 'controlled' usage), and the banner is dismissible, ensure you update app state for this property when the dismiss event fires. If the banner is not dismissible, it can still be hidden by setting this property.
tone	"auto" | "info" | "success" | "warning" | "critical"	Sets the tone of the Banner, based on the intention of the information being conveyed. The banner is a live region and the type of status will be dictated by the Tone selected. - critical creates an assertive live region that is announced by screen readers immediately. - neutral, info, success, warning and caution creates an informative live region that is announced by screen readers after the current message.

Events

Event	Type
afterhide	CustomEvent
dismiss	CustomEvent

Listen for these with @afterhide-style listeners on <SBanner>.

Slots

Slot	Description
default	The content of the Banner.
secondary-actions	The secondary actions to display at the bottom of the Banner. Only Buttons with the variant of "secondary" or "auto" are permitted. A maximum of two s-button components are allowed.