home Docs Components Samples

Alert

Displays important messages or notifications with variant styling (default, destructive).

Installation

Add the Alert component using the CLI:

shadcnblazor component add alert

Usage

The Alert component displays important messages or notifications. Use ChildContent to render your message. Set Variant to AlertVariant.Default or AlertVariant.Destructive for different styling.

1
2
3
4
<Alert>
    <p class="font-medium">Heads up!</p>
    <p class="text-muted-foreground">You can add components to your app using the CLI.</p>
</Alert>

Examples

Icons

Although support for icons deos not natively exist, you can structure your alerts to use icons (for example from Lucide) like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="flex flex-col gap-3">
    <Alert Variant="@AlertVariant.Default" Class="flex">
        <LuBadgeCheck />
        <div class="space-y-1">
            <p class="font-medium">Payment successful</p>
            <p class="text-muted-foreground">Your payment of $29.99 has been processed. A receipt has been sent to your email address.</p>
        </div>
    </Alert>
    <Alert Variant="@AlertVariant.Default" Class="flex">
        <LuInfo />
        <div class="space-y-1">
            <p class="font-medium">New feature available</p>
            <p class="text-muted-foreground">We've added dark mode support. You can enable it in your account settings.</p>
        </div>
    </Alert>
</div>

Variants

Use the Variant parameter to switch between default and destructive styling for error or warning messages. Only two variants are provided by default.

1
2
3
4
5
6
7
8
9
10
<div class="flex flex-col gap-3">
    <Alert Variant="@AlertVariant.Default">
        <p class="font-medium">Default</p>
        <p class="text-muted-foreground">This is a standard informational alert.</p>
    </Alert>
    <Alert Variant="@AlertVariant.Destructive">
        <p class="font-medium">Destructive</p>
        <p class="text-muted-foreground">This alert indicates an error or destructive action.</p>
    </Alert>
</div>

Interactivity

You can embed other components into alerts to add interactivity.

1
2
3
4
5
6
7
8
9
10
<Alert Variant="@AlertVariant.Default" Class="relative flex">
    <LuBadgeCheck />
    <div class="space-y-1">
        <p class="font-medium">Artifacts generated</p>
        <p class="text-muted-foreground">3 files have been created and are ready to download. Click view to access your generated content.</p>
    </div>
    <Button Variant="@Variant.Outline" class="flex-1">
        View
    </Button>
</Alert>

Styling

Customize alert colors by adding Tailwind classes like bg-amber-50 dark:bg-amber-950. Use the group utility on the Alert to trigger hover animations on child elements:

1
2
3
4
5
6
7
<Alert Variant="@AlertVariant.Default" Class="flex group transition-colors duration-300 bg-primary/15 border-primary/50 hover:bg-primary/25 hover:border-primary/75">
    <LuInfo class="w-4 overflow-hidden transition-all duration-300 group-hover:w-0 group-hover:mr-0" />
    <div class="space-y-1">
        <p class="font-medium">New feature available</p>
        <p class="text-muted-foreground transition-all duration-300 group-hover:text-foreground/75">We've added dark mode support. You can enable it in your account settings.</p>
    </div>
</Alert>

API Reference

Alert

A contextual alert message for displaying important information to the user.

Properties

Name Type Description
AdditionalAttributes Dictionary<string, Object>
ChildContent RenderFragment The content of the alert.
Class string
Variant AlertVariant The visual style variant of the alert.

Methods

Method Returns Description
Equals bool
GetHashCode int
GetType Type
SetParametersAsync Task
ToString string
Mobile support for API reference coming soon.

Loading...

An unhandled error has occurred. Reload 🗙