v3.0.0-alpha.5
Components

Alert

GitHub
A callout to draw user's attention.

Usage

Title

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

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

Description

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

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

Icon

Use the icon prop to show an Icon.

Heads up!
You can change the primary color in your app config.
<template>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-heroicons-command-line"
  />
</template>

Avatar

Use the avatar prop to show an Avatar.

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

Color

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

Heads up!
You can change the primary color in your app config.
<template>
  <UAlert
    color="gray"
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-heroicons-command-line"
  />
</template>

Variant

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

Heads up!
You can change the primary color in your app config.
<template>
  <UAlert
    color="gray"
    variant="solid"
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-heroicons-command-line"
  />
</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>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    close
  />
</template>

You can also pass all the props of the Button component to customize it.

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

Close Icon

Use the close-icon prop to customize the close button Icon. Defaults to i-heroicons-x-mark-20-solid.

Heads up!
You can change the primary color in your app config.
<template>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    close
    close-icon="i-heroicons-arrow-right"
  />
</template>
You can customize this icon globally in your app.config.ts under ui.icons.close key.

Actions

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

Heads up!
You can change the primary color in your app config.
<template>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    :actions="[
      {
        label: 'Action 1'
      },
      {
        label: 'Action 2',
        color: 'gray',
        variant: 'subtle'
      }
    ]"
  />
</template>
Actions renders differently when the description is not set. You can try to remove it.

Examples

class prop

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

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

ui prop

Use the ui prop to override the slots styles of the Button.

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

API

Props

Prop Default Type
title

string

description

string

icon

string

avatar

AvatarProps

color

primary

"error" | "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "gray"

variant

outline

"solid" | "outline" | "soft" | "subtle"

actions

ButtonProps[]

Display a list of actions:

  • under the title and description if multiline
  • next to the close button if not multiline
close

false

boolean | ButtonProps

Display a close button to dismiss the alert. { size: 'md', color: 'gray', variant: 'link' }

closeIcon

appConfig.ui.icons.close

string

The icon displayed in the close button.

ui

Partial<{ root: string; wrapper: string; title: string; description: string; icon: string; avatar: string; avatarSize: string; actions: string; close: string; }>

Slots

Slot Type
leading

{}

title

{}

description

{}

actions

{}

close

{ ui: any; }

Emits

Event Type
update:open

[value: boolean]

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    alert: {
      slots: {
        root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
        wrapper: 'min-w-0 flex-1 flex flex-col gap-1',
        title: 'text-sm font-medium',
        description: 'text-sm opacity-90',
        icon: 'shrink-0 size-5',
        avatar: 'shrink-0',
        avatarSize: '2xl',
        actions: 'flex gap-1.5 shrink-0',
        close: 'p-0.5'
      },
      variants: {
        color: {
          primary: '',
          error: '',
          red: '',
          orange: '',
          amber: '',
          yellow: '',
          lime: '',
          green: '',
          emerald: '',
          teal: '',
          cyan: '',
          sky: '',
          blue: '',
          indigo: '',
          violet: '',
          purple: '',
          fuchsia: '',
          pink: '',
          rose: '',
          gray: ''
        },
        variant: {
          solid: '',
          outline: '',
          soft: '',
          subtle: ''
        },
        multiline: {
          true: {
            root: 'items-start',
            actions: 'items-start mt-1'
          },
          false: {
            root: 'items-center',
            actions: 'items-center'
          }
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: 'solid',
          class: {
            root: 'bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900'
          }
        },
        {
          color: 'primary',
          variant: 'outline',
          class: {
            root: 'text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25'
          }
        },
        {
          color: 'primary',
          variant: 'soft',
          class: {
            root: 'bg-primary-500/10 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400'
          }
        },
        {
          color: 'primary',
          variant: 'subtle',
          class: {
            root: 'bg-primary-500/10 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25'
          }
        },
        {
          color: 'gray',
          variant: 'solid',
          class: {
            root: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
          }
        },
        {
          color: 'gray',
          variant: 'outline',
          class: {
            root: 'text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-200 dark:ring-gray-800'
          }
        },
        {
          color: 'gray',
          variant: 'soft',
          class: {
            root: 'text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-800/50'
          }
        },
        {
          color: 'gray',
          variant: 'subtle',
          class: {
            root: 'text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-800/50 ring ring-inset ring-gray-300 dark:ring-gray-700'
          }
        }
      ],
      defaultVariants: {
        color: 'primary',
        variant: 'outline'
      }
    }
  }
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Accordion

A stacked set of collapsible panels.

Avatar

An image element with fallback.