Alert

A callout for user attention.

This is an alert

Some information worth calling out.

<template>
  <Alert variant="warning" title="Changes may be lost" description="You have unsaved changes." />
</template>

Props

Name	Type	Default
variant	'success' \| 'warning' \| 'error' \| 'default'	default
icon	string	one per variant, matching Figma (e.g. i-lucide-circle-alert for warning)
title	string	—
description	string	—
close	boolean \| object	—

Slots

Name	Description
title	Escape hatch: replaces the `title` prop's plain text.
description	Escape hatch: replaces the `description` prop's plain text — the usual way to add an inline link or button, e.g. `You've used all seats. <NuxtLink>Upgrade</NuxtLink>`.
close	Escape hatch: replaces the default close button rendered when `close` is set.

Usage

Examples

success

A state change the user doesn't need to act on immediately.

Your changes have been saved

Any pending edits are now up to date.

<template>
  <Alert variant="success" title="Your changes have been saved" description="Any pending edits are now up to date." />
</template>

warning

Something the user should act on before continuing, without blocking them yet.

Changes may be lost

Save your work before leaving this page.

<template>
  <Alert variant="warning" title="Changes may be lost" description="Save your work before leaving this page." />
</template>

error

Something that failed and needs the user's attention.

Your changes have not been saved

Something went wrong — try again.

<template>
  <Alert variant="error" title="Your changes have not been saved" description="Something went wrong — try again." />
</template>

default

A callout that isn't tied to a specific state — a tip or a note.

This is a default alert

For a callout that isn't tied to a state.

<template>
  <Alert variant="default" title="This is a default alert" description="For a callout that isn't tied to a state." />
</template>

Dismissible

An alert the user can close once they've read it.

Seat limit reached

You've used all available seats.

<template>
  <Alert variant="warning" title="Seat limit reached" description="You've used all available seats." close />
</template>

With inline action

A call to action placed inline within the description.

Seat limit reached

You've used all available seats. Upgrade plan

<template>
  <Alert variant="warning" title="Seat limit reached">
    <template #description>
      You've used all available seats.
      <NuxtLink to="/billing" class="text-text-primary underline hover:opacity-80">Upgrade plan</NuxtLink>
    </template>
  </Alert>
</template>