PUI.Alert (pui v1.0.0-beta.7)

Copy Markdown

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

AttributeTypeDefaultDescription
variantstring"default"Alert style: "default" or "destructive"
classstring""Additional CSS classes

Slots

SlotDescription
iconOptional icon displayed at the start
titleAlert title text
descriptionDetailed description text
inner_blockCustom content (alternative to slots)

Summary

Functions

Renders the description of an alert.

Renders the title of an alert.

Functions

alert(assigns)

Attributes

  • class (:string) - Defaults to "".
  • variant (:string) - Defaults to "default". Must be one of "default", "destructive", or "unstyled".
  • role (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon
  • title - Accepts attributes:
    • class (:string)
  • description - Accepts attributes:
    • class (:string)
  • inner_block

alert_description(assigns)

Renders the description of an alert.

Attributes

  • class (:string) - Defaults to "".
  • is_unstyled (:boolean) - Defaults to false.

Slots

  • inner_block

alert_title(assigns)

Renders the title of an alert.

Attributes

  • class (:string) - Defaults to "".
  • is_unstyled (:boolean) - Defaults to false.

Slots

  • inner_block