Alert

GitLab
Um callout para chamar a atenção do usuário.

Uso

Título

Use a prop title para definir o título do Alert.

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

Descrição

Use a prop description para definir a descrição do Alert.

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

Ícone

Use a prop icon para exibir um Icon.

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

Avatar

Use a prop avatar para exibir um Avatar.

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

Cor

Use a prop color para alterar a cor do Alert.

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

Variante

Use a prop variant para alterar a variante do Alert.

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

Fechar

Use a prop close para exibir um Button para dispensar o Alert.

Um evento update:open será emitido quando o botão de fechar for clicado.
Heads up!
You can change the primary color in your app config.
<template>
  <NAlert
    title="Heads up!"
    description="You can change the primary color in your app config."
    color="neutral"
    variant="outline"
    close
  />
</template>

Você pode passar qualquer propriedade do componente Button para personalizá-lo.

Heads up!
You can change the primary color in your app config.
<template>
  <NAlert
    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>

Ícone de fechar

Use a prop close-icon para personalizar o Icon do botão de fechar. O padrão é i-lucide-x.

Heads up!
You can change the primary color in your app config.
<template>
  <NAlert
    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>
Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.close.
Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.close.

Ações

Use a prop actions para adicionar algumas ações de Button ao Alert.

Heads up!
You can change the primary color in your app config.
<template>
  <NAlert
    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>

Orientação

Use a prop orientation para alterar a orientação do Alert.

Heads up!
You can change the primary color in your app config.
<template>
  <NAlert
    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>

Exemplos

class prop

Use a prop class para sobrescrever os estilos base do Alert.

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

ui prop

Use a prop ui para sobrescrever os estilos dos slots do Alert.

Heads up!
You can change the primary color in your app config.
<template>
  <NAlert
    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
iconany
avatar AvatarProps
color'primary' "error" | "primary" | "secondary" | "accent" | "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' }
closefalseboolean | Omit<ButtonProps, LinkPropsKeys>

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

closeIconappConfig.ui.icons.closeany

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

Emits

Event Type
update:open[value: boolean]

Tema

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: '',
          accent: '',
          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 '@nitro/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: '',
              accent: '',
              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 GitLab.

Changelog

No recent changes

Theme

Um componente headless para tematizar componentes filhos.

Avatar

Um elemento img com fallback e suporte ao Nuxt Image.