Banner

Full-width dismissible notification with title, subtitle, and action button for page-level announcements.

Open in Storybook

Interactive Demo

System UpdateScheduled maintenance this weekend.

Variant: informationwarningsuccessurgent

Usage

<script setup>
import { ref } from 'vue';
import { Banner } from '@yellowcard/b2b-design-system';

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

<template>
  <Banner
    v-model="showBanner"
    variant="information"
    title="System Update"
    subtitle="Scheduled maintenance this weekend."
    actionLabel="Learn More"
    @action="handleAction"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
title*	string	—	Banner heading text
subtitle	string	—	Supporting description
variant	'information' | 'warning' | 'success' | 'urgent'	'information'	Visual style
size	'large' | 'small'	'large'	Banner size
actionLabel	string	—	Text for action button
actionPosition	string	—	Action button position
dismissible	boolean	true	Show close button
autoDismiss	boolean	false	Auto-dismiss after delay
autoDismissDelay	number	5000	Auto-dismiss delay in ms
modelValue	boolean	true	Visibility (v-model)

Events

Event	Payload	Description
update:modelValue	boolean	Visibility change
dismiss	—	Banner dismissed
action	—	Action button clicked