Alert

GitHub à
Un appel pour attirer l'attention de l'utilisateur.

Utilisation

Titre

Utilisez la prop title pour définir le titre de l'alerte.

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

Description

Utilisez la prop description pour définir la description de l'alerte.

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>

icône

Utilisez la prop icon pour afficher un 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>

Avatars

Utilisez la prop avatar pour afficher un 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>

Couleur

Utilisez le prop color pour changer la couleur de l'alerte.

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

Utilisez le prop variant pour changer la variante de l'alerte.

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>

Fermer

Utilisez la prop close pour afficher un Button pour rejeter l'alerte.

Un événement update:open sera émis lorsque le bouton de fermeture est cliqué.
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>

Vous pouvez passer n'importe quelle propriété du composant Button pour le personnaliser.

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>

Fermer Icône

Utilisez la prop close-icon pour personnaliser le bouton de fermeture 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."
    color="neutral"
    variant="outline"
    close
    close-icon="i-lucide-arrow-right"
  />
</template>
Vous pouvez personnaliser cette icône globalement dans votre app.config.ts sous la touche ui.icons.close.
Vous pouvez personnaliser cette icône globalement dans votre vite.config.ts sous la touche ui.icons.close.

Actions

Utilisez la prop actions pour ajouter des actions Button à l'alerte.

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

Utilisez le prop orientation pour modifier l'orientation de l'alerte.

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>

Exemples

xclass prop

Utilisez la prop class pour remplacer les styles de base de l'alerte.

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

Utilisez le prop ui pour remplacer les styles de slots de l'alerte.

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; }

Slots

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

Emis

Event Type
update:open
[value: boolean]

Thème

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.