Banner

Display a banner at the top of your website to inform users about important information.

Usage

Use the Banner component in your app.vue or in a layout:

app.vue

<template>
  <UApp>
    <UBanner />

    <UHeader />

    <UMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </UMain>

    <UFooter />
  </UApp>
</template>

Title

Use the title prop to display a title on the Banner.

title

<template>
  <UBanner title="This is a banner with an important message." />
</template>

Icon

Use the icon prop to display an icon on the Banner.

icon

<template>
  <UBanner icon="i-lucide-info" title="This is a banner with an icon." />
</template>

Color

Use the color prop to change the color of the Banner.

color

<template>
  <UBanner color="neutral" icon="i-lucide-info" title="This is a banner with an icon." />
</template>

Close

Use the close prop to display a Button to dismiss the Banner. Defaults to false.

A close event will be emitted when the close button is clicked.

<template>
  <UBanner id="example" title="This is a closable banner." close />
</template>

When closed, banner-${id} will be stored in the local storage to prevent it from being displayed again.
For the example above, banner-example will be stored in the local storage.

Close Icon

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>

You can customize this icon globally in your app.config.ts under ui.icons.close key.

You can customize this icon globally in your vite.config.ts under ui.icons.close key.

Actions

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>

The action buttons default to color="neutral" and size="xs". You can customize these values by passing them directly to each action button.

Link

You can pass any property from the <NuxtLink> component such as to, target, rel, etc.

color

<template>
  <UBanner
    to="https://github.com/nuxt/ui-pro"
    target="_blank"
    title="Purchase Nuxt UI Pro and get access to all components."
  />
</template>

The NuxtLink component will inherit all other attributes you pass to the User component.

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`id`	`'1'`	`string` A unique id saved to local storage to remember if the banner has been dismissed. Change this value to show the banner again.
`icon`		`string`
`title`		`string`
`actions`		`ButtonProps[]` Display a list of actions next to the title. `{ color: 'neutral', size: 'xs' }`
`to`		`string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric`
`target`		`null \| "_blank" \| "_parent" \| "_self" \| "_top" \| string & {}`
`color`	`'primary'`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`close`	`false`	`boolean \| ButtonProps` Display a close button to dismiss the banner. `{ size: 'md', color: 'neutral', variant: 'ghost' }`
`closeIcon`	`appConfig.ui.icons.close`	`string` The icon displayed in the close button.
`ui`		`PartialString<{ root: string[]; container: string; left: string; center: string; right: string; icon: string; title: string; actions: string; close: string; }>`

Slots

Slot	Type
`leading`	`{}`
`title`	`{}`
`actions`	`{}`
`close`	`{ ui: any; }`

Emits

Event	Type
`close`	`any[]`

Theme

app.config.ts

export default defineAppConfig({
  uiPro: {
    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-[var(--ui-bg)] pointer-events-none',
        title: 'text-sm text-[var(--ui-bg)] font-medium truncate',
        actions: 'flex gap-1.5 shrink-0 isolate',
        close: 'text-[var(--ui-bg)] hover:bg-[var(--ui-bg)]/10 focus-visible:bg-[var(--ui-bg)]/10'
      },
      variants: {
        color: {
          primary: {
            root: 'bg-[var(--ui-primary)]'
          },
          secondary: {
            root: 'bg-[var(--ui-secondary)]'
          },
          success: {
            root: 'bg-[var(--ui-success)]'
          },
          info: {
            root: 'bg-[var(--ui-info)]'
          },
          warning: {
            root: 'bg-[var(--ui-warning)]'
          },
          error: {
            root: 'bg-[var(--ui-error)]'
          },
          neutral: {
            root: 'bg-[var(--ui-bg-inverted)]'
          }
        },
        to: {
          true: ''
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          to: true,
          class: {
            root: 'hover:bg-[var(--ui-primary)]/90'
          }
        },
        {
          color: 'neutral',
          to: true,
          class: {
            root: 'hover:bg-[var(--ui-bg-inverted)]/90'
          }
        }
      ],
      defaultVariants: {
        color: 'primary'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        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-[var(--ui-bg)] pointer-events-none',
            title: 'text-sm text-[var(--ui-bg)] font-medium truncate',
            actions: 'flex gap-1.5 shrink-0 isolate',
            close: 'text-[var(--ui-bg)] hover:bg-[var(--ui-bg)]/10 focus-visible:bg-[var(--ui-bg)]/10'
          },
          variants: {
            color: {
              primary: {
                root: 'bg-[var(--ui-primary)]'
              },
              secondary: {
                root: 'bg-[var(--ui-secondary)]'
              },
              success: {
                root: 'bg-[var(--ui-success)]'
              },
              info: {
                root: 'bg-[var(--ui-info)]'
              },
              warning: {
                root: 'bg-[var(--ui-warning)]'
              },
              error: {
                root: 'bg-[var(--ui-error)]'
              },
              neutral: {
                root: 'bg-[var(--ui-bg-inverted)]'
              }
            },
            to: {
              true: ''
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              to: true,
              class: {
                root: 'hover:bg-[var(--ui-primary)]/90'
              }
            },
            {
              color: 'neutral',
              to: true,
              class: {
                root: 'hover:bg-[var(--ui-bg-inverted)]/90'
              }
            }
          ],
          defaultVariants: {
            color: 'primary'
          }
        }
      }
    })
  ]
})

Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.