Banner

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

Usage

Title

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

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

Icon

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

This is a banner with an icon.
<template>
  <PBanner 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.

This is a banner with an icon.
<template>
  <PBanner 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>
  <PBanner 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>
  <PBanner
    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 pohon.icons.close key.
You can customize this icon globally in your vite.config.ts under pohon.icons.close key.

Actions

Use the actions prop to add some Button actions to the Banner.

This is a banner with actions.
<script setup lang="ts">
const actions = ref([
  {
    label: 'Action 1',
    variant: 'outline'
  },
  {
    label: 'Action 2',
    trailingIcon: 'i-lucide:arrow-right'
  }
])
</script>

<template>
  <PBanner 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.

NuxtLabs is joining Vercel!
<template>
  <PBanner
    to="https://nuxtlabs.com/"
    target="_blank"
    title="NuxtLabs is joining Vercel!"
    color="primary"
  />
</template>
The NuxtLink component will inherit all other attributes you pass to the User component.

Examples

Within app.vue

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

app.vue
<template>
  <PApp>
    <PBanner icon="i-lucide:construction" title="Pohon UI v4 has been released!" />

    <PHeader />

    <PMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </PMain>

    <PFooter />
  </PApp>
</template>

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 | object

The icon displayed next to the title.

title string
actions PButtonProps[]

Display a list of actions next to the title. { color: 'neutral', size: 'xs' }

to string | kt | Tt
target null | "_blank" | "_parent" | "_self" | "_top" | string & {}
color'primary' "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
closefalseboolean | Omit<PButtonProps, PLinkPropsKeys>

Display a close button to dismiss the banner. { size: 'md', color: 'neutral', variant: 'ghost' }

closeIconappConfig.pohon.icons.close string | object

The icon displayed in the close button.

pohon { root?: ClassValue; container?: ClassValue; left?: ClassValue; center?: ClassValue; right?: ClassValue; icon?: ClassValue; title?: ClassValue; actions?: ClassValue; close?: ClassValue; }

Slots

Slot Type
leading{ pohon: object; }
titleobject
actionsobject
close{ pohon: object; }

Emits

Event Type
close[]

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PBanner. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts
export default defineAppConfig({
  pohon: {
    banner: {
      slots: {
        root: '',
        container: '',
        left: '',
        center: '',
        right: '',
        icon: '',
        title: '',
        actions: '',
        close: ''
      },
      variants: {
        color: {
          primary: {
            root: ''
          },
          secondary: {
            root: ''
          },
          success: {
            root: ''
          },
          info: {
            root: ''
          },
          warning: {
            root: ''
          },
          error: {
            root: ''
          },
          neutral: {
            root: ''
          }
        },
        to: {
          true: ''
        }
      },
      compoundVariants: [],
      defaultVariants: {
        color: 'primary'
      }
    }
  }
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    banner: {
      slots: {
        root: '',
        container: '',
        left: '',
        center: '',
        right: '',
        icon: '',
        title: '',
        actions: '',
        close: ''
      },
      variants: {
        color: {
          primary: {
            root: ''
          },
          secondary: {
            root: ''
          },
          success: {
            root: ''
          },
          info: {
            root: ''
          },
          warning: {
            root: ''
          },
          error: {
            root: ''
          },
          neutral: {
            root: ''
          }
        },
        to: {
          true: ''
        }
      },
      compoundVariants: [],
      defaultVariants: {
        color: 'primary'
      }
    }
  }
};

Changelog

No recent changes

Badge

A short text to represent a status or a category.

Button

A button element that can act as a link or trigger an action.