Alert

Displays a callout for important content, with semantic variants for different message types.

Default

Heads up!

You can add components to your app using the CLI.

Destructive

Use the variant="destructive" for error or warning messages that require attention.

Destructive

Error

Your session has expired. Please log in again.

With Icon

Add an icon using the :icon slot for additional visual context.

With Icon

Information

This is an informational message for the user.

Deletion Failed

There was a problem deleting your file. Please try again.

    <.alert>
  <:icon>
    <.icon name="lucide-info" class="size-4" />
  </:icon>
  <:title>Information</:title>
  <:description>This is an informational message.</:description>
</.alert>
  

Title Only

The description slot is optional. Use title-only alerts for brief messages.

Title Only

Heads up!

Destructive

Error

With Icon

Information

Deletion Failed

Title Only

All systems operational.