Alert

Alert components for displaying important messages and status updates.

Alert without Description

A compact alert with just a title and icon. Useful for brief status updates.

Your changes have been saved 
<.alert>
  <:icon>
    <.icon name="hero-check-circle" class="size-5" />
  </:icon>
  <:title>Your changes have been saved</:title>
</.alert>

Alert with Title and Description

Use both title and description slots for more detailed alert messages.

Update Available
A new version of the application is available. Update now to get the latest features and improvements. 
<.alert>
  <:icon>
    <.icon name="hero-information-circle" class="size-5" />
  </:icon>
  <:title>Update Available</:title>
  <:description>
    A new version of the application is available.
  </:description>
</.alert>

Destructive Alert Variant

Use the destructive variant for errors, warnings, or destructive actions. 

<.alert variant="destructive">
  <:icon>
    <.icon name="hero-exclamation-triangle" class="size-5" />
  </:icon>
  <:title>Error</:title>
  <:description>
    Unable to process your request.
  </:description>
</.alert>

Alert with Custom Icon

Use any icon or SVG in the icon slot to customize the alert's visual appearance.

Tips & Tricks
Customize your alert icons using Heroicons, Lucide, or any custom SVG. 
<.alert>
  <:icon>
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24">
      <!-- Custom SVG icon -->
    </svg>
  </:icon>
  <:title>Tips & Tricks</:title>
</.alert>

Component API

Available attributes and slots for the alert component.

Name Type Default Description
variant string "default" Alert style variant: default, destructive
class string "" Additional CSS classes
icon slot nil Optional icon displayed at the start
title slot nil Alert title text
description slot nil Detailed description text