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" :show-close-button="false" message="This is a success banner." />
  <spr-banner v-model:show="showBannerError" type="error" :show-close-button="false" message="This is an error banner." />
  <spr-banner v-model:show="showBannerInfo" type="info" :show-close-button="false" message="This is an info banner." />
  <spr-banner v-model:show="showBannerPending" type="pending" :show-close-button="false" message="This is a pending banner." />
  <spr-banner v-model:show="showBannerCaution" type="caution" :show-close-button="false" 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

Name	Description	Type	Default
type	Banner type	'success' | 'error' | 'info' | 'pending' | 'caution'	'success'
showCloseButton	Show the close button	boolean	false
message	Banner message (used if no slot provided)	string
v-model:show	Controls the visibility of the banner	boolean	true
@update:show	Emitted when the banner is shown or closed	function

Product Uses