Alert Component - ShadCn.Blazor

Default

A basic alert with title and description.

Heads up!

You can add components to your app using the CLI.

<Alert>
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
        You can add components to your app using the CLI.
    </AlertDescription>
</Alert>

Destructive

Use the Destructive variant for critical alerts.

Error

Your session has expired. Please log in again.

<Alert Variant="AlertVariant.Destructive">
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>
        Your session has expired. Please log in again.
    </AlertDescription>
</Alert>

More Examples

Additional alert styles for common messaging.

Success!

Your payment was processed successfully.

Tip

Press Ctrl + K to open the command menu.

<Alert>
    <AlertTitle>Success!</AlertTitle>
    <AlertDescription>
        Your payment was processed successfully.
    </AlertDescription>
</Alert>

<Alert>
    <AlertTitle>Tip</AlertTitle>
    <AlertDescription>
        Press <kbd>Ctrl + K</kbd> to open the command menu.
    </AlertDescription>
</Alert>