Renders an alert with Pure Admin BEM classes.

Supports dismissible alerts using Phoenix.LiveView.JS commands.

Markup shapes

Two layouts depending on whether an icon is supplied:

• With icon — the non-icon content is wrapped in pa-alert__content so the icon and the content sit as the two flex children of the alert. Without the wrapper every word/element next to the icon would become its own flex item and the layout would break.
• Without icon — structural children (pa-alert__heading, pa-alert__list, pa-alert__actions, top-level <p>/<hr>) are emitted as direct children of pa-alert. SCSS gives them flex-basis: 100% so each lands on its own row in the wrap.

Heading sizes

pa-alert__heading defaults to the alert's body font-size + semibold weight (compact look — good for status banners). Pass heading_size="lg" to add the pa-alert__heading--lg modifier for the louder, deliberate-read presentation (blocking errors, system updates, quota warnings).

Multi-line content

When you have an icon next to multi-line content (heading + body + actions inside pa-alert__content), pass is_multiline to opt back to align-items: flex-start so the icon stays at the top with the heading instead of centring against the whole stack. Not needed for structural stacks without an icon.

Examples

<.alert variant="success">Operation completed successfully.</.alert>

<.alert variant="danger" is_dismissible id="error-alert">
  <:icon><i class="fa-solid fa-triangle-exclamation"></i></:icon>
  Something went wrong!
</.alert>

<.alert variant="info" heading_text="System Update" heading_size="lg" is_multiline>
  <:icon><i class="fa-solid fa-circle-info"></i></:icon>
  New features available.
  <:actions>
    <.button variant="primary" size="sm">Update Now</.button>
  </:actions>
</.alert>

<.alert variant="danger" heading_text="Validation failed">
  Please fix the errors below.
</.alert>

Attributes

• id (:string) - Defaults to nil.
• variant (:string) - Color variant. Defaults to "info". Must be one of "primary", "secondary", "success", "warning", "danger", "info", "light", or "dark".
• size (:string) - Defaults to nil.Must be one of nil, "sm", or "lg".
• is_outline (:boolean) - Outline style. Defaults to false.
• is_dismissible (:boolean) - Show close button. Defaults to false.
• is_multiline (:boolean) - Top-aligns flex children. Pass when an icon sits next to multi-line content. Defaults to false.
• heading_text (:string) - Alert heading text (shorthand for :heading slot). Defaults to nil.
• heading_size (:string) - Heading size — "lg" adds pa-alert__heading--lg for the deliberate-read presentation. Defaults to nil. Must be one of nil, or "lg".
• theme_color (:string) - Theme color 1-9. Defaults to nil. Must be one of nil, "1", "2", "3", "4", "5", "6", "7", "8", or "9".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• icon - Alert icon (forces pa-alert__content wrapper around the rest).
• heading - Alert heading (h4) - overrides heading_text.
• list - Alert list items (wrapped in ul.pa-alert__list).
• actions - Action buttons row (rendered with toast-style separator).
• inner_block (required)

@spec dismiss_alert(String.t()) :: Phoenix.LiveView.JS.t()

Returns a JS command that dismisses an alert by hiding it with a fade transition.