Alert

The Alert component displays important messages and status updates with optional icon, title, and description slots. It supports default and destructive variants for different severity levels.

Import

use PUI
# or
import PUI.Alert

Basic Usage

<.alert>
  <:title>Heads up!</:title>
  <:description>You can add components to your app using the CLI.</:description>
</.alert>

With Icon

Add an icon to draw attention:

<.alert>
  <:icon>
    <.icon name="hero-information-circle" class="size-5" />
  </:icon>
  <:title>Information</:title>
  <:description>This is an informational alert message.</:description>
</.alert>

Destructive Variant

Use the destructive variant for error or warning messages:

<.alert variant="destructive">
  <:icon>
    <.icon name="hero-exclamation-triangle" class="size-5" />
  </:icon>
  <:title>Error</:title>
  <:description>Something went wrong. Please try again.</:description>
</.alert>

Custom Content

Use inner_block for fully custom alert content:

<.alert>
  <div class="flex items-center gap-3">
    <.icon name="hero-check-circle" class="size-5 text-green-500" />
    <div>
      <p class="font-semibold">Success!</p>
      <p class="text-sm">Your changes have been saved.</p>
    </div>
  </div>
</.alert>

Unstyled / Headless

<.alert variant="unstyled" class="my-custom-alert">
  <:title>Custom Alert</:title>
  <:description>With your own styles.</:description>
</.alert>

API Reference

Attributes

Slots