Maui.Alert (maui v1.0.0-alpha.9)

Alert component for displaying important messages and status updates.

Basic Usage

<.alert>
  <p>This is an alert message.</p>
</.alert>

With Icon

<.alert>
  <:icon>
    <.icon name="hero-information-circle" class="size-5" />
  </:icon>
  <p>Alert with an icon.</p>
</.alert>

With Title and Description

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

Destructive Variant

Use the destructive variant for errors and warnings:

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

Without Description

<.alert>
  <:icon>
    <.icon name="hero-exclamation-triangle" class="size-5" />
  </:icon>
  <:title>Warning</:title>
</.alert>

Attributes

Attribute	Type	Default	Description
`variant`	`string`	`"default"`	Alert style: "default" or "destructive"
`class`	`string`	`""`	Additional CSS classes

Slots

Slot	Description
`icon`	Optional icon displayed at the start
`title`	Alert title text
`description`	Detailed description text
`inner_block`	Custom content (alternative to slots)

Summary

Functions

alert(assigns)

alert_description(assigns)

Renders the description of an alert.

alert_title(assigns)

Renders the title of an alert.

Functions

alert(assigns)

Attributes

class (:string) - Defaults to "".
variant (:string) - Defaults to "default". Must be one of "default", or "destructive".

Slots

icon
title
description
inner_block

alert_description(assigns)

Renders the description of an alert.

Attributes

class (:string) - Defaults to "".

Slots

inner_block

alert_title(assigns)

Renders the title of an alert.

Attributes

class (:string) - Defaults to "".

Slots

inner_block