v3.0.0-alpha.8

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-lucide-terminal"
  />
</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/nuxt.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="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.

Heads up!
You can change the primary color in your app config.
<template>
  <UAlert
    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>
  <UAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    color="neutral"
    variant="outline"
    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."
    color="neutral"
    variant="outline"
    :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-lucide-x.

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."
    color="neutral"
    variant="outline"
    close
    close-icon="i-lucide-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."
    color="neutral"
    variant="outline"
    :actions="[
      {
        label: 'Action 1'
      },
      {
        label: 'Action 2',
        color: 'neutral',
        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 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."
    class="rounded-none"
  />
</template>

ui prop

Use the ui prop to override the slots styles 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."
    icon="i-lucide-rocket"
    :ui="{
      icon: 'size-11'
    }"
  />
</template>

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

title

string

description

string

icon

string

avatar

AvatarProps

color

primary

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

variant

solid

"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 { size: 'xs' }
close

false

boolean | ButtonProps

Display a close button to dismiss the alert. { size: 'md', color: 'neutral', 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-[calc(var(--ui-radius)*2)] 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: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        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-[var(--ui-primary)] text-[var(--ui-bg)]'
          }
        },
        {
          color: 'primary',
          variant: 'outline',
          class: {
            root: 'text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25'
          }
        },
        {
          color: 'primary',
          variant: 'soft',
          class: {
            root: 'bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]'
          }
        },
        {
          color: 'primary',
          variant: 'subtle',
          class: {
            root: 'bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25'
          }
        },
        {
          color: 'neutral',
          variant: 'solid',
          class: {
            root: 'text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]'
          }
        },
        {
          color: 'neutral',
          variant: 'outline',
          class: {
            root: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]'
          }
        },
        {
          color: 'neutral',
          variant: 'soft',
          class: {
            root: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50'
          }
        },
        {
          color: 'neutral',
          variant: 'subtle',
          class: {
            root: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]'
          }
        }
      ],
      defaultVariants: {
        color: 'primary',
        variant: 'solid'
      }
    }
  }
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Accordion

A stacked set of collapsible panels.

Avatar

An img element with fallback and Nuxt Image support.