Use the title prop to display a title on the Banner.
<template>
<UBanner title="This is a banner with an important message." />
</template>
Use the icon prop to display an icon on the Banner.
<template>
<UBanner icon="i-lucide-info" title="This is a banner with an icon." />
</template>
Use the color prop to change the color of the Banner.
<template>
<UBanner color="neutral" icon="i-lucide-info" title="This is a banner with an icon." />
</template>
Use the close prop to display a Button to dismiss the Banner. Defaults to false.
close event will be emitted when the close button is clicked.<template>
<UBanner id="example" title="This is a closable banner." close />
</template>
banner-${id} will be stored in the local storage to prevent it from being displayed again. banner-example will be stored in the local storage.Use the close-icon prop to customize the close button Icon. Defaults to i-lucide-x.
<template>
<UBanner
title="This is a closable banner with a custom close icon."
close
close-icon="i-lucide-x-circle"
/>
</template>
Use the actions prop to add some Button actions to the Banner.
<script setup lang="ts">
const actions = ref([
{
label: 'Action 1',
variant: 'outline'
},
{
label: 'Action 2',
trailingIcon: 'i-lucide-arrow-right'
}
])
</script>
<template>
<UBanner title="This is a banner with actions." :actions="actions" />
</template>
color="neutral" and size="xs". You can customize these values by passing them directly to each action button.You can pass any property from the <NuxtLink> component such as to, target, rel, etc.
<template>
<UBanner
to="https://nuxtlabs.com/"
target="_blank"
title="NuxtLabs is joining Vercel!"
color="primary"
/>
</template>
NuxtLink component will inherit all other attributes you pass to the User component.app.vueUse the Banner component in your app.vue or in a layout:
<template>
<UApp>
<UBanner icon="i-lucide-construction" title="Nuxt UI v4 has been released!" />
<UHeader />
<UMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UMain>
<UFooter />
</UApp>
</template>
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
id |
|
A unique id saved to local storage to remember if the banner has been dismissed. Change this value to show the banner again. |
icon |
The icon displayed next to the title. | |
title |
| |
actions |
Display a list of actions next to the title.
| |
to |
| |
target |
| |
color |
|
|
close |
|
Display a close button to dismiss the banner.
|
closeIcon |
|
The icon displayed in the close button. |
ui |
|
| Slot | Type |
|---|---|
leading |
|
title |
|
actions |
|
close |
|
| Event | Type |
|---|---|
close |
|
export default defineAppConfig({
ui: {
banner: {
slots: {
root: [
'relative z-50 w-full',
'transition-colors'
],
container: 'flex items-center justify-between gap-3 h-12',
left: 'hidden lg:flex-1 lg:flex lg:items-center',
center: 'flex items-center gap-1.5 min-w-0',
right: 'lg:flex-1 flex items-center justify-end',
icon: 'size-5 shrink-0 text-inverted pointer-events-none',
title: 'text-sm text-inverted font-medium truncate',
actions: 'flex gap-1.5 shrink-0 isolate',
close: 'text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0'
},
variants: {
color: {
primary: {
root: 'bg-primary'
},
secondary: {
root: 'bg-secondary'
},
success: {
root: 'bg-success'
},
info: {
root: 'bg-info'
},
warning: {
root: 'bg-warning'
},
error: {
root: 'bg-error'
},
neutral: {
root: 'bg-inverted'
}
},
to: {
true: ''
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
root: 'hover:bg-primary/90'
}
},
{
color: 'neutral',
to: true,
class: {
root: 'hover:bg-inverted/90'
}
}
],
defaultVariants: {
color: 'primary'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
banner: {
slots: {
root: [
'relative z-50 w-full',
'transition-colors'
],
container: 'flex items-center justify-between gap-3 h-12',
left: 'hidden lg:flex-1 lg:flex lg:items-center',
center: 'flex items-center gap-1.5 min-w-0',
right: 'lg:flex-1 flex items-center justify-end',
icon: 'size-5 shrink-0 text-inverted pointer-events-none',
title: 'text-sm text-inverted font-medium truncate',
actions: 'flex gap-1.5 shrink-0 isolate',
close: 'text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0'
},
variants: {
color: {
primary: {
root: 'bg-primary'
},
secondary: {
root: 'bg-secondary'
},
success: {
root: 'bg-success'
},
info: {
root: 'bg-info'
},
warning: {
root: 'bg-warning'
},
error: {
root: 'bg-error'
},
neutral: {
root: 'bg-inverted'
}
},
to: {
true: ''
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
root: 'hover:bg-primary/90'
}
},
{
color: 'neutral',
to: true,
class: {
root: 'hover:bg-inverted/90'
}
}
],
defaultVariants: {
color: 'primary'
}
}
}
})
]
})