PtahUi.Components.Alert (PtahUI v0.1.0)

Copy Markdown View Source

Alert component for informing users about important events.

Example

<.alert color="success" icon="hero-check-circle">
  The purchase has been confirmed!
</.alert>

<.alert color="error" variant="soft" title="Erro" dismissable on_dismiss={JS.hide(to: "#my-alert")} id="my-alert">
  Something went wrong. Please try again.
</.alert>

Summary

Functions

alert(assigns)

Functions

alert(assigns)

Attributes

  • id (:string) - Defaults to nil.
  • color (:string) - Alert color: info, success, warning, error, or nil for neutral. Defaults to nil.
  • variant (:string) - Visual style: solid (filled), soft (tinted), outline (bordered), dash (dashed border). Defaults to "solid".
  • direction (:string) - Layout direction. Add class="sm:flex-row sm:items-center" for responsive. Defaults to "horizontal".
  • icon (:string) - Hero icon name rendered on the left. Defaults to nil.
  • icon_class (:string) - Override icon color/size. Defaults to nil.
  • title (:string) - Bold title above the message. Defaults to nil.
  • dismissable (:boolean) - Show an × dismiss button. Defaults to false.
  • on_dismiss (:any) - phx-click for the dismiss button (e.g. JS.hide). Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - Alert message content.
  • actions - Optional action buttons rendered on the right.