Alert

A callout to draw user's attention.

Usage

Title

Use the title prop to set the title of the Alert.

title

Heads up!

<template>
  <PAlert title="Heads up!" />
</template>

Description

Use the description prop to set the description of the Alert.

title

description

Heads up!

You can change the primary color in your app config.

<template>
  <PAlert title="Heads up!" description="You can change the primary color in your app config." />
</template>

Icon

Use the icon prop to show an Icon.

icon

Heads up!

You can change the primary color in your app config.

<template>
  <PAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide:terminal"
  />
</template>

Avatar

Use the avatar prop to show an Avatar.

avatar.src

Heads up!

You can change the primary color in your app config.

<template>
  <PAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    :avatar="{
      src: 'https://github.com/nuxt.png'
    }"
  />
</template>

Color

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

color

Heads up!

You can change the primary color in your app config.

<template>
  <PAlert
    color="neutral"
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide:terminal"
  />
</template>

Variant

Use the variant prop to change the variant of the Alert.

color

variant

Heads up!

You can change the primary color in your app config.

<template>
  <PAlert
    color="neutral"
    variant="subtle"
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide:terminal"
  />
</template>

Close

Use the close prop to display a Button to dismiss the Alert.

An update:open event will be emitted when the close button is clicked.

Heads up!

You can change the primary color in your app config.

<template>
  <PAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    color="neutral"
    variant="outline"
    close
  />
</template>

You can pass any property from the Button component to customize it.

close.class

Heads up!

You can change the primary color in your app config.

<template>
  <PAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    color="neutral"
    variant="outline"
    :close="{
      color: 'primary',
      variant: 'outline',
      class: 'akar:rounded-full'
    }"
  />
</template>

Close Icon

Use the close-icon prop to customize the close button Icon. Defaults to i-lucide:x.

closeIcon

Heads up!

You can change the primary color in your app config.

<template>
  <PAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    color="neutral"
    variant="outline"
    close
    close-icon="i-lucide:arrow-right"
  />
</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 Alert.

description

Heads up!

You can change the primary color in your app config.

<template>
  <PAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    color="neutral"
    variant="outline"
    :actions="[
      {
        label: 'Action 1'
      },
      {
        label: 'Action 2',
        color: 'neutral',
        variant: 'subtle'
      }
    ]"
  />
</template>

Orientation

Use the orientation prop to change the orientation of the Alert.

description

orientation

Heads up!

You can change the primary color in your app config.

<template>
  <PAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    color="neutral"
    variant="outline"
    orientation="horizontal"
    :actions="[
      {
        label: 'Action 1'
      },
      {
        label: 'Action 2',
        color: 'neutral',
        variant: 'subtle'
      }
    ]"
  />
</template>

Examples

`class` prop

Use the class prop to override the base styles of the Alert.

class

Heads up!

You can change the primary color in your app config.

<template>
  <PAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    class="rounded-none"
  />
</template>

`pohon` prop

Use the pohon prop to override the slots styles of the Alert.

pohon.icon

Heads up!

You can change the primary color in your app config.

<template>
  <PAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide:rocket"
    :pohon="{
      icon: 'akar:size-11'
    }"
  />
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`orientation`	`'vertical'`	`"vertical" \| "horizontal"` The orientation between the content and the actions.
`title`		`string`
`description`		`string`
`icon`		`string \| object`
`avatar`		`PAvatarProps`
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`variant`	`'solid'`	`"solid" \| "outline" \| "soft" \| "subtle"`
`actions`		`PButtonProps[]` Display a list of actions: under the title and description when orientation is `vertical` next to the close button when orientation is `horizontal{ size: 'xs' }`
`close`	`false`	`boolean \| Omit<PButtonProps, PLinkPropsKeys>` Display a close button to dismiss the alert. `{ size: 'md', color: 'neutral', variant: 'link' }`
`closeIcon`	`appConfig.pohon.icons.close`	`string \| object` The icon displayed in the close button.
`pohon`		`{ root?: ClassValue; wrapper?: ClassValue; title?: ClassValue; description?: ClassValue; icon?: ClassValue; avatar?: ClassValue; avatarSize?: ClassValue; actions?: ClassValue; close?: ClassValue; }`

Slots

Slot	Type
`leading`	`{ pohon: object; }`
`title`	`object`
`description`	`object`
`actions`	`object`
`close`	`{ pohon: object; }`

Emits

Event	Type
`update:open`	`[value: boolean]`

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 PAlert. 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: {
    alert: {
      slots: {
        root: '',
        wrapper: '',
        title: '',
        description: '',
        icon: '',
        avatar: '',
        avatarSize: '',
        actions: '',
        close: ''
      },
      variants: {
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        variant: {
          solid: '',
          outline: '',
          soft: '',
          subtle: ''
        },
        orientation: {
          horizontal: {
            root: '',
            actions: ''
          },
          vertical: {
            root: '',
            actions: ''
          }
        },
        title: {
          true: {
            description: ''
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        color: 'primary',
        variant: 'solid'
      }
    }
  }
};

vite.config.ts

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

export default defineAppConfig({
  pohon: {
    alert: {
      slots: {
        root: '',
        wrapper: '',
        title: '',
        description: '',
        icon: '',
        avatar: '',
        avatarSize: '',
        actions: '',
        close: ''
      },
      variants: {
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        variant: {
          solid: '',
          outline: '',
          soft: '',
          subtle: ''
        },
        orientation: {
          horizontal: {
            root: '',
            actions: ''
          },
          vertical: {
            root: '',
            actions: ''
          }
        },
        title: {
          true: {
            description: ''
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        color: 'primary',
        variant: 'solid'
      }
    }
  }
};

Changelog

No recent changes

Main

A main element that fills the available viewport height.

Avatar

An image element with a fallback for representing the user.