Banner

Full-width notification bars for important announcements, alerts, and messages.

Default

A full-width banner with info styling.

html

<div class="vt-banner vt-banner-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-info vt-w-5 vt-h-5 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">A new software update is available. See what's new in version 3.0.</p>
  <button class="vt-shrink-0 vt-p-1 vt-rounded-lg vt-hover:bg-black/5 vt-dark:hover:bg-white/10 vt-transition-colors">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-4 vt-h-4">
      <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
    </svg>
  </button>
</div>

Variants

Banners in different semantic colors for various contexts.

html

<div class="vt-banner vt-banner-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-info vt-w-5 vt-h-5 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">A new software update is available. See what's new in version 3.0.</p>
</div>

<div class="vt-banner vt-banner-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-check vt-w-5 vt-h-5 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">Your account has been successfully verified.</p>
</div>

<div class="vt-banner vt-banner-warning">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-triangle-alert vt-w-5 vt-h-5 vt-shrink-0">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">Your storage is almost full. Please upgrade your plan.</p>
</div>

<div class="vt-banner vt-banner-danger">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-x vt-w-5 vt-h-5 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">Payment failed. Please check your billing details and try again.</p>
</div>

With Action

Banners with an action button on the right side.

html

<div class="vt-banner vt-banner-warning">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-triangle-alert vt-w-5 vt-h-5 vt-shrink-0">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">Your trial expires in 3 days.</p>
  <button class="vt-shrink-0 vt-inline-flex vt-items-center vt-justify-center vt-rounded-lg vt-text-xs vt-font-medium vt-h-7 vt-px-3 vt-border vt-border-current vt-opacity-80 vt-hover:opacity-100 vt-transition-opacity">Upgrade Now</button>
</div>

<div class="vt-banner vt-banner-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-info vt-w-5 vt-h-5 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">A new version of the app is available.</p>
  <button class="vt-shrink-0 vt-inline-flex vt-items-center vt-justify-center vt-rounded-lg vt-text-xs vt-font-medium vt-h-7 vt-px-3 vt-border vt-border-current vt-opacity-80 vt-hover:opacity-100 vt-transition-opacity">Update Now</button>
</div>

With Link

Banners with inline link text for more context.

html

<div class="vt-banner vt-banner-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-info vt-w-5 vt-h-5 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">We've updated our privacy policy. <a href="#" class="vt-underline vt-font-medium vt-hover:opacity-80 vt-transition-opacity">Read more</a>.</p>
</div>

<div class="vt-banner vt-banner-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-check vt-w-5 vt-h-5 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">Your email has been confirmed. <a href="#" class="vt-underline vt-font-medium vt-hover:opacity-80 vt-transition-opacity">Go to dashboard</a>.</p>
</div>

Compact

Thinner banners with reduced padding and smaller text.

html

<div class="vt-banner vt-py-2 vt-gap-2 vt-banner-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-info vt-w-4 vt-h-4 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>
  </svg>
  <p class="vt-text-xs vt-flex-1">Maintenance scheduled for tonight at 11 PM UTC.</p>
</div>

<div class="vt-banner vt-py-2 vt-gap-2 vt-banner-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-check vt-w-4 vt-h-4 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path>
  </svg>
  <p class="vt-text-xs vt-flex-1">All systems operational.</p>
</div>

<div class="vt-banner vt-py-2 vt-gap-2 vt-banner-warning">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-triangle-alert vt-w-4 vt-h-4 vt-shrink-0">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path>
  </svg>
  <p class="vt-text-xs vt-flex-1">API rate limit is at 80%.</p>
</div>

<div class="vt-banner vt-py-2 vt-gap-2 vt-banner-danger">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-x vt-w-4 vt-h-4 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6"></path>
  </svg>
  <p class="vt-text-xs vt-flex-1">Service outage detected in EU region.</p>
</div>

Dismissible

Banners with a dismiss button to close them.

html

<div id="banner-dismiss-1" class="vt-banner vt-transition-all vt-banner-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-info vt-w-5 vt-h-5 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">New feature: Dark mode is now available in settings.</p>
  <button onclick="document.getElementById('banner-dismiss-1').style.display='none'" class="vt-shrink-0 vt-p-1 vt-rounded-lg vt-hover:bg-black/5 vt-dark:hover:bg-white/10 vt-transition-colors">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-4 vt-h-4">
      <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
    </svg>
  </button>
</div>

<div id="banner-dismiss-2" class="vt-banner vt-transition-all vt-banner-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-check vt-w-5 vt-h-5 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">Your profile has been updated successfully.</p>
  <button onclick="document.getElementById('banner-dismiss-2').style.display='none'" class="vt-shrink-0 vt-p-1 vt-rounded-lg vt-hover:bg-black/5 vt-dark:hover:bg-white/10 vt-transition-colors">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-4 vt-h-4">
      <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
    </svg>
  </button>
</div>

<div id="banner-dismiss-3" class="vt-banner vt-transition-all vt-banner-warning">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-triangle-alert vt-w-5 vt-h-5 vt-shrink-0">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">Your subscription will renew in 7 days.</p>
  <button onclick="document.getElementById('banner-dismiss-3').style.display='none'" class="vt-shrink-0 vt-p-1 vt-rounded-lg vt-hover:bg-black/5 vt-dark:hover:bg-white/10 vt-transition-colors">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-4 vt-h-4">
      <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
    </svg>
  </button>
</div>

<div id="banner-dismiss-4" class="vt-banner vt-transition-all vt-banner-danger">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-x vt-w-5 vt-h-5 vt-shrink-0">
    <circle cx="12" cy="12" r="10"></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6"></path>
  </svg>
  <p class="vt-text-sm vt-flex-1">Your API key has expired. Please generate a new one.</p>
  <button onclick="document.getElementById('banner-dismiss-4').style.display='none'" class="vt-shrink-0 vt-p-1 vt-rounded-lg vt-hover:bg-black/5 vt-dark:hover:bg-white/10 vt-transition-colors">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-4 vt-h-4">
      <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
    </svg>
  </button>
</div>

Guidelines

Page- or section-level announcement across the top (maintenance, cookie, release). NOT inline field feedback → alert; NOT transient → toast.

Use a banner for page-level announcements across the top.

Pair an action button with the announcement when relevant.

Don't

Don't use a banner for inline field errors — use an alert or field message.

API Reference

All utility classes available for the Banner component.

Class	Type	Description
`vt-banner-info`	Variant	Blue tinted background and text for informational banners
`vt-banner-success`	Variant	Green tinted background and text for success banners
`vt-banner-warning`	Variant	Yellow/amber tinted background and text for warning banners
`vt-banner-danger`	Variant	Red tinted background and text for error/danger banners
`vt-rounded-lg`	Base	Rounded corners on the banner container
`vt-py-3 vt-px-4`	Base	Default padding for standard banner size
`vt-py-2 vt-px-4`	Size	Compact padding for smaller banner variant
`vt-flex vt-items-center vt-gap-3`	Layout	Horizontal layout with icon, text, and actions
`vt-text-sm`	Base	Default text size for banner message
`vt-text-xs`	Size	Smaller text for compact banners
`vt-flex-1`	Layout	Text fills remaining space between icon and action
`vt-shrink-0`	Layout	Prevents icon and close button from shrinking

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="banner" for site-wide announcements, role="alert" for urgent messages
Dismissible	Close button should have aria-label="Dismiss banner"
Focus	When banner appears dynamically, manage focus appropriately
Live region	Use aria-live="polite" for non-blocking updates

Built with:

Icons Button