Alert

A short, inline message that calls out something the user should notice — a status, a warning, a result of an action. Unlike a toast (which is transient) or a modal (which interrupts), an alert sits in the layout and stays until the situation changes.

Alert is a compound component: an Alert container with AlertTitle and AlertDescription inside, plus optional icon and action slots.

Anatomy

Alert ← container; sets the variant, lays out icon/content/action
├── #icon (slot) ← optional leading icon
├── AlertTitle ← short heading
├── AlertDescription ← supporting text
└── #action (slot) ← optional action, top-right

Usage

A title and a description. The default neutral variant suits general messages.

BasicA neutral alert.

<script setup lang="ts">
import { Alert, AlertTitle, AlertDescription } from "@dlbcodes/ui";
</script>

<template>
    <div class="w-full max-w-md">
        <Alert>
            <AlertTitle>Heads up</AlertTitle>
            <AlertDescription>
                This is a neutral alert with a title and a short description.
            </AlertDescription>
        </Alert>
    </div>
</template>

Variants

Each variant maps to a semantic status color — use the one that matches the message's meaning.

Variantsinfo, success, warning, and destructive.

<script setup lang="ts">
import { Alert, AlertTitle, AlertDescription } from "@dlbcodes/ui";
import {
    PhInfo,
    PhCheckCircle,
    PhWarning,
    PhXCircle,
} from "@phosphor-icons/vue";
</script>

<template>
    <div class="flex w-full max-w-md flex-col gap-3">
        <Alert variant="info">
            <template #icon><PhInfo /></template>
            <AlertTitle>Information</AlertTitle>
            <AlertDescription>A new version is available.</AlertDescription>
        </Alert>

        <Alert variant="success">
            <template #icon><PhCheckCircle /></template>
            <AlertTitle>Success</AlertTitle>
            <AlertDescription>Your changes have been saved.</AlertDescription>
        </Alert>

        <Alert variant="warning">
            <template #icon><PhWarning /></template>
            <AlertTitle>Warning</AlertTitle>
            <AlertDescription>Your storage is almost full.</AlertDescription>
        </Alert>

        <Alert variant="destructive">
            <template #icon><PhXCircle /></template>
            <AlertTitle>Error</AlertTitle>
            <AlertDescription
                >Something went wrong. Please try again.</AlertDescription
            >
        </Alert>
    </div>
</template>

With an icon, no title

For short messages, drop the title and use just an icon and description.

Icon onlyA compact single-line alert.

<script setup lang="ts">
import { Alert, AlertDescription } from "@dlbcodes/ui";
import { PhInfo } from "@phosphor-icons/vue";
</script>

<template>
    <div class="w-full max-w-md">
        <Alert variant="info">
            <template #icon><PhInfo /></template>
            <AlertDescription>
                A short, single-line informational message — no title needed.
            </AlertDescription>
        </Alert>
    </div>
</template>

With an action

Use the action slot for a button — a dismiss, a retry, or a call to action.

With actionAn alert with a button.

<script setup lang="ts">
import { Alert, AlertTitle, AlertDescription, Button } from "@dlbcodes/ui";
import { PhSealWarning } from "@phosphor-icons/vue";
</script>

<template>
    <div class="w-full max-w-md">
        <Alert variant="warning">
            <template #icon><PhSealWarning /></template>
            <AlertTitle>Subscription expiring</AlertTitle>
            <AlertDescription>Your plan renews in 3 days.</AlertDescription>
            <template #action>
                <Button variant="ghost" size="sm">Renew</Button>
            </template>
        </Alert>
    </div>
</template>

Props

Alert

Prop	Type	Default	Description
variant	"neutral" | "info" | "success" | "warning" | "destructive"	"neutral"	Semantic status color of the alert.
class	string	—	Classes merged onto the container.

Slots: default (the title and description), icon (optional leading icon), action (optional top-right action).

AlertTitle / AlertDescription

Each takes only class and renders its slot content — the title is emphasized, the description is the supporting text.

Accessibility

• The container has role="alert", so assistive technology announces it when it appears — appropriate for messages that result from a user action or a state change.
• Because role="alert" is announced immediately, use it for genuinely noticeable messages. For purely decorative or persistent informational banners that shouldn't interrupt, consider whether role="alert" is warranted (you can override it via the container if needed).
• Don't rely on color alone — the icon and title text carry the meaning for users who can't distinguish the variant colors.