Banner

The Banner component is used to display important messages, statuses, or alerts to users. It supports different types (success, error, info, pending, caution), can be closed by the user, and allows for customizable content via slots.

Basic Usage

Display banners of different types using the type prop.

This is a success banner.

This is an error banner.

This is an info banner.

This is a pending banner.

This is a caution banner.

<template>
  <spr-banner v-model:show="showBannerSuccess" type="success" message="This is a success banner." />
  <spr-banner v-model:show="showBannerError" type="error" message="This is an error banner." />
  <spr-banner v-model:show="showBannerInfo" type="info" message="This is an info banner." />
  <spr-banner v-model:show="showBannerPending" type="pending" message="This is a pending banner." />
  <spr-banner v-model:show="showBannerCaution" type="caution" message="This is a caution banner." />
</template>

<script setup lang="ts">
import SprBanner from '@/components/banner/banner.vue';
import { ref } from 'vue';

const showBannerSuccess = ref(true);
const showBannerError = ref(true);
const showBannerInfo = ref(true);
const showBannerPending = ref(true);
const showBannerCaution = ref(true);
</script>

Close

Banners can be closed by the user if showCloseButton is true. Use v-model:show` to control visibility.

	This is a closable success banner.
	This is a closable error banner.
	This is a closable info banner.
	This is a closable pending banner.
	This is a closable caution banner.

<template>
  ...
  <spr-banner
    v-model:show="showBannerCloseSuccess"
    type="success"
    show-close-button
    message="This is a closable success banner."
  />
  <spr-banner
    v-model:show="showBannerCloseError"
    type="error"
    show-close-button
    message="This is a closable error banner."
  />
  <spr-banner
    v-model:show="showBannerCloseInfo"
    type="info"
    show-close-button
    message="This is a closable info banner."
  />
  <spr-banner
    v-model:show="showBannerClosePending"
    type="pending"
    show-close-button
    message="This is a closable pending banner."
  />
  <spr-banner
    v-model:show="showBannerCloseCaution"
    type="caution"
    show-close-button
    message="This is a closable caution banner."
  />
  ...
  <spr-button tone="success" @click="showBannerCloseSuccess = true">Show Success</spr-button>
  <spr-button tone="danger" @click="showBannerCloseError = true">Show Error</spr-button>
  <spr-button tone="info" @click="showBannerCloseInfo = true">Show Info</spr-button>
  <spr-button tone="pending" @click="showBannerClosePending = true">Show Pending</spr-button>
  <spr-button tone="caution" @click="showBannerCloseCaution = true">Show Caution</spr-button>
  ...
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SprBanner from '@/components/banner/banner.vue';
import SprButton from '@/components/button/button.vue';

const showBannerCloseSuccess = ref(true);
const showBannerCloseError = ref(true);
const showBannerCloseInfo = ref(true);
const showBannerClosePending = ref(true);
const showBannerCloseCaution = ref(true);
</script>

Customize

You can customize the content of the banner using the default slot.

Custom Success!This is a custom banner message.

<template>
  <spr-banner v-model:show="showBannerCustom" type="success" show-close-button>
    <div class="spr-flex spr-flex-col spr-gap-2">
      <strong>Custom Success!</strong> <span>This is a custom banner message.</span>
    </div>
  </spr-banner>
  <spr-button tone="success" @click="showBannerCustom = true">Show Custom Banner</spr-button>
</template>

<script setup lang="ts">
import SprBanner from '@/components/banner/banner.vue';
import SprButton from '@/components/button/button.vue';
import { ref } from 'vue';

const showBannerCustom = ref(true);
</script>

API Reference

Props

Name	Description	Type	Default
type	Determines the visual appearance and semantic meaning of the banner: success: Indicates a successful operation or positive message error: Indicates an error or critical issue that needs attention info: Provides general information to the user pending: Indicates an operation in progress or awaiting action caution: Indicates a warning or potential issue that may need attention Each type uses specific colors and icons to reinforce its meaning.	'success' | 'error' | 'info' | 'pending' | 'caution'	'success'
showCloseButton	When true, displays a close button that allows users to dismiss the banner. When clicked, it sets the show model value to false.	boolean	false
message	Text content to display in the banner. This is only used when no content is provided via the default slot. If both the slot and message prop are provided, the slot content takes precedence.	string	undefined
show (v-model)	Controls the visibility of the banner. Using v-model:show enables two-way binding for programmatically showing or hiding the banner. The banner is completely removed from the DOM when not shown.	boolean	true

Events

Name	Description	Parameters
update:show	Emitted when the banner's visibility changes, either from user interaction with the close button or programmatic changes to the show prop. This event is used for the v-model:show binding.	(value: boolean) - The new visibility state

Slots

Name	Description
default	Used to customize the content of the banner. When provided, this content replaces the standard message display. If not provided, the banner will display the icon appropriate for the selected type, followed by the text specified in the message prop.

Product Uses