Banner

Banner is a full-width announcement bar intended for top-of-page messaging. It supports four appearance variants and an optional dismiss button.

ExamplesCodeUsageChangelog

Info

System maintenance is scheduled for Sunday at 2:00 AM. Expect brief downtime.

Tailwind v4

<Banner appearance="info">
  System maintenance is scheduled for Sunday at 2:00 AM. Expect brief downtime.
</Banner>

Warning

Your license expires in 7 days. Renew now to avoid interruption.

Tailwind v4

<Banner appearance="warning">
  Your license expires in 7 days. Renew now to avoid interruption.
</Banner>

Error

Data sync failed. Some records may be out of date. Contact support if the issue persists.

Tailwind v4

<Banner appearance="error">
  Data sync failed. Some records may be out of date.
</Banner>

Announcement

📣

New feature: Sieve test reports can now be exported as PDF from the Reports tab.

Tailwind v4

<Banner appearance="announcement">
  New feature: Sieve test reports can now be exported as PDF from the Reports tab.
</Banner>

Dismissible

This banner can be dismissed. Click the × to hide it.

Tailwind v4

<script setup>
import { ref } from 'vue'
const showBanner = ref(true)
</script>

<template>
  <Banner
    v-if="showBanner"
    appearance="info"
    :is-dismissible="true"
    @dismiss="showBanner = false"
  >
    This banner can be dismissed.
  </Banner>
</template>

Props

Prop	Type	Default	Description
appearance	'info' | 'warning' | 'error' | 'announcement'	'info'	Color scheme and icon
isDismissible	boolean	false	Show a dismiss button on the right

Emits

Event	Payload	Description
dismiss	—	Fired when the user clicks the dismiss button

Slots

Slot	Description
default	Banner message content