Alert

サイトマップ
ユーザーの注意を引くためのコールアウト。

使用法

Title

titleプロパティを使用して、アラートのタイトルを設定します。

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

Description

descriptionプロパティを使用して、アラートの説明を設定します。

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

iconプロパティを使用して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プロパティを使用して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

colorプロパティを使用して、アラートの色を変更します。

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

variantプロパティを使用して、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プロパティを使用してButtonを表示し、アラートを却下します。

closeボタンがクリックされるとupdate:openイベントが発生します。
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>

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."
    color="neutral"
    variant="outline"
    :close="{
      color: 'primary',
      variant: 'outline',
      class: 'rounded-full'
    }"
  />
</template>

アイコンを閉じる

close-iconプロパティを使用して、閉じるボタンIconをカスタマイズします。デフォルトは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>
このアイコンはapp.config.tsのui.icons.closeキーでグローバルにカスタマイズできます。
このアイコンはvite.config.tsのui.icons.closeキーでグローバルにカスタマイズできます。

Actions

actionsプロパティを使用して、アラートに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."
    color="neutral"
    variant="outline"
    :actions="[
      {
        label: 'Action 1'
      },
      {
        label: 'Action 2',
        color: 'neutral',
        variant: 'subtle'
      }
    ]"
  />
</template>

Orientation

orientationプロパティを使用して、アラートの向きを変更します。

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"
    orientation="horizontal"
    :actions="[
      {
        label: 'Action 1'
      },
      {
        label: 'Action 2',
        color: 'neutral',
        variant: 'subtle'
      }
    ]"
  />
</template>

例

classプロップ

classプロパティを使用して、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プロップ

uiプロパティを使用して、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
any
avatar
AvatarProps
color
'primary'
"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
variant
'solid'
"solid" | "outline" | "soft" | "subtle"
orientation
'vertical'
"vertical" | "horizontal"

The orientation between the content and the actions.

actions
ButtonProps[]

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<ButtonProps, LinkPropsKeys>

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

closeIcon
appConfig.ui.icons.close
any

The icon displayed in the close button.

ui
{ root?: SlotClass; wrapper?: SlotClass; title?: SlotClass; description?: SlotClass; icon?: SlotClass; avatar?: SlotClass; avatarSize?: SlotClass; actions?: SlotClass; close?: SlotClass; }

スロット

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

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',
        title: 'text-sm font-medium',
        description: 'text-sm opacity-90',
        icon: 'shrink-0 size-5',
        avatar: 'shrink-0',
        avatarSize: '2xl',
        actions: 'flex flex-wrap gap-1.5 shrink-0',
        close: 'p-0'
      },
      variants: {
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        variant: {
          solid: '',
          outline: '',
          soft: '',
          subtle: ''
        },
        orientation: {
          horizontal: {
            root: 'items-center',
            actions: 'items-center'
          },
          vertical: {
            root: 'items-start',
            actions: 'items-start mt-2.5'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: 'solid',
          class: {
            root: 'bg-primary text-inverted'
          }
        },
        {
          color: 'primary',
          variant: 'outline',
          class: {
            root: 'text-primary ring ring-inset ring-primary/25'
          }
        },
        {
          color: 'primary',
          variant: 'soft',
          class: {
            root: 'bg-primary/10 text-primary'
          }
        },
        {
          color: 'primary',
          variant: 'subtle',
          class: {
            root: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
          }
        },
        {
          color: 'neutral',
          variant: 'solid',
          class: {
            root: 'text-inverted bg-inverted'
          }
        },
        {
          color: 'neutral',
          variant: 'outline',
          class: {
            root: 'text-highlighted bg-default ring ring-inset ring-default'
          }
        },
        {
          color: 'neutral',
          variant: 'soft',
          class: {
            root: 'text-highlighted bg-elevated/50'
          }
        },
        {
          color: 'neutral',
          variant: 'subtle',
          class: {
            root: 'text-highlighted bg-elevated/50 ring ring-inset ring-accented'
          }
        }
      ],
      defaultVariants: {
        color: 'primary',
        variant: 'solid'
      }
    }
  }
})
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({
      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',
            title: 'text-sm font-medium',
            description: 'text-sm opacity-90',
            icon: 'shrink-0 size-5',
            avatar: 'shrink-0',
            avatarSize: '2xl',
            actions: 'flex flex-wrap gap-1.5 shrink-0',
            close: 'p-0'
          },
          variants: {
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            variant: {
              solid: '',
              outline: '',
              soft: '',
              subtle: ''
            },
            orientation: {
              horizontal: {
                root: 'items-center',
                actions: 'items-center'
              },
              vertical: {
                root: 'items-start',
                actions: 'items-start mt-2.5'
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: 'solid',
              class: {
                root: 'bg-primary text-inverted'
              }
            },
            {
              color: 'primary',
              variant: 'outline',
              class: {
                root: 'text-primary ring ring-inset ring-primary/25'
              }
            },
            {
              color: 'primary',
              variant: 'soft',
              class: {
                root: 'bg-primary/10 text-primary'
              }
            },
            {
              color: 'primary',
              variant: 'subtle',
              class: {
                root: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
              }
            },
            {
              color: 'neutral',
              variant: 'solid',
              class: {
                root: 'text-inverted bg-inverted'
              }
            },
            {
              color: 'neutral',
              variant: 'outline',
              class: {
                root: 'text-highlighted bg-default ring ring-inset ring-default'
              }
            },
            {
              color: 'neutral',
              variant: 'soft',
              class: {
                root: 'text-highlighted bg-elevated/50'
              }
            },
            {
              color: 'neutral',
              variant: 'subtle',
              class: {
                root: 'text-highlighted bg-elevated/50 ring ring-inset ring-accented'
              }
            }
          ],
          defaultVariants: {
            color: 'primary',
            variant: 'solid'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Changelog

No recent changes

Theme

A headless component to theme child components.

Avatar

An img element with fallback and Nuxt Image support.