Skip to main content

​
Usage

The Banner component is used to display important information or announcements at the top of a page. 
<template>
  <UBanner
    id="announcement"
    title="New feature available!"
    icon="i-heroicons-megaphone"
    close
  />
</template>

​
With Actions

Add action buttons to the banner. 
<UBanner
  id="announcement"
  title="New feature available!"
  icon="i-heroicons-megaphone"
  :actions="[
    { label: 'Learn more', to: '/docs' },
    { label: 'Dismiss', color: 'neutral' }
  ]"
  close
/>

​
Colors

Set the banner color with the color prop. 
<UBanner
  title="Success message"
  color="success"
  icon="i-heroicons-check-circle"
  close
/>

<UBanner
  title="Warning message"
  color="warning"
  icon="i-heroicons-exclamation-triangle"
  close
/>

<UBanner
  title="Error message"
  color="error"
  icon="i-heroicons-x-circle"
  close
/>

​
Clickable

Make the entire banner clickable by providing a to prop. 
<UBanner
  title="Click to learn more"
  to="/docs"
  icon="i-heroicons-information-circle"
/>

​
Persistence

The banner can remember if it has been dismissed using the id prop. The dismissed state is saved to localStorage. 
<UBanner
  id="welcome-banner"
  title="Welcome to our site!"
  close
/>
Without an id prop, the banner will reappear on page reload.

​
Slots

Customize the banner content using slots. 
<UBanner close>
  <template #leading>
    <UIcon name="i-heroicons-sparkles" />
  </template>
  
  <template #title>
    <span class="font-bold">Custom title content</span>
  </template>
  
  <template #actions>
    <UButton label="Custom action" size="xs" />
  </template>
</UBanner>

​
Props

​
as
any
default:"'div'"
The element or component this component should render as.
​
id
string
A unique id saved to local storage to remember if the banner has been dismissed. Without an explicit id, the banner will not be persisted and will reappear on page reload.
​
icon
string
The icon displayed next to the title.
​
title
string
The title text to display in the banner.
​
actions
ButtonProps[]
Display a list of actions next to the title.
​
to
string | RouteLocationRaw
Make the banner clickable by providing a route.
​
target
string
The target attribute for the link (e.g., ‘_blank’).
​
color
string
default:"'primary'"
The color theme of the banner.
​
close
boolean | ButtonProps
default:"false"
Display a close button to dismiss the banner. Can be customized with ButtonProps.
​
closeIcon
string
default:"appConfig.ui.icons.close"
The icon displayed in the close button.
​
class
any
Custom class to apply to the root element.
​
ui
Partial<typeof theme>
Override default theme classes.

​
Slots

​
leading
{ ui }
Customize the leading content (typically an icon).
​
title
Customize the title content.
​
actions
Customize the actions content.
​
close
{ ui }
Customize the close button.

​
Emits

​
close
() => void
Emitted when the banner is closed.

Build docs developers (and LLMs) love

Get started for freeTalk to us