Provides <.alert> component for status messages, notifications, and important inline feedback.

Alerts are blocks placed inline in the page that combine a semantic color, a default status icon, optional title and subtitle, an arbitrary content body, and a built-in dismiss button.

Usage

The simplest alert is a single line of content with the default color:

<.alert>Your changes have been saved.</.alert>

Add a title and a semantic color to call attention to specific outcomes:

<.alert color="success" title="Profile Updated">
  Your profile changes have been saved successfully.
</.alert>

Semantic Colors

Each color communicates the nature of the message and sets the background, border, text tones, and default status icon together as a coordinated theme:

<.alert color="default">Neutral message</.alert>
<.alert color="primary">Branded or featured message</.alert>
<.alert color="info" title="Update Available">A new version is ready to install.</.alert>
<.alert color="success" title="Order Confirmed">Your order has been processed.</.alert>
<.alert color="warning" title="Session Expiring">Your session will expire in 5 minutes.</.alert>
<.alert color="danger" title="Connection Lost">Unable to connect to the server.</.alert>

All colors are tuned for both light and dark modes through the design system's color tokens.

Content Structure

Alerts compose optional content regions (title, subtitle, and the main body), so you can scale from a single sentence to a fully structured message.

Body only

When neither title nor subtitle is set, the body sits centered next to the icon on a single visual row:

<.alert color="success">Your changes have been saved.</.alert>

Title and body

When a title is present, it occupies the first row and the body wraps onto the second row beneath it:

<.alert title="Profile Updated" color="success">
  Your profile changes have been saved successfully.
</.alert>

Title, subtitle, and body

The subtitle renders inline next to the title, well-suited for a category, code, or short context tag:

<.alert
  color="info"
  title="Scheduled Maintenance"
  subtitle="System Update"
>
  The system will be unavailable on Saturday from 2 AM to 4 AM.
</.alert>

Icons

Each color has a default status icon. You can replace it with custom markup or hide it entirely.

Hide the icon

Use hide_icon for compact alerts where the color alone conveys meaning:

<.alert hide_icon>
  Message without an icon
</.alert>

Provide a custom icon

The :icon slot replaces the default SVG. Use Fluxon's <.icon> helper or any inline markup:

<.alert color="info">
  <:icon>
    <.icon name="hero-bell" class="size-4.5" />
  </:icon>
  You have new notifications.
</.alert>

Dismissing Alerts

By default, alerts include a close button in the trailing column. Clicking it hides the alert client-side immediately.

Non-dismissible alerts

Set hide_close for alerts the user must acknowledge through other means (for example, permanent banners or alerts replaced by a server-driven render):

<.alert color="warning" hide_close>
  This message will remain visible until further notice.
</.alert>

React to dismissal on the server

Pass a Phoenix.LiveView.JS command to on_close to run server logic. Your commands execute first; the alert is then hidden client-side:

<.alert
  color="info"
  on_close={JS.push("dismiss_announcement", value: %{id: @announcement.id})}
>
  We've updated our terms of service.
</.alert>

def handle_event("dismiss_announcement", %{"id" => id}, socket) do
  {:noreply, mark_announcement_seen(socket, id)}
end

Action Buttons

The default slot accepts arbitrary content, so you can embed buttons, links, or forms for recovery and follow-up actions:

<.alert
  color="warning"
  title="Unsaved Changes"
  on_close={JS.push("dismiss_warning")}
>
  You have unsaved changes that will be lost.

  <div class="mt-4 flex gap-2">
    <.button size="xs" phx-click="save_changes">Save Changes</.button>
    <.button size="xs" color="ghost" phx-click="discard_changes">Discard</.button>
  </div>
</.alert>

Examples

Form error banner

Render a top-of-form alert summarizing validation problems:

<.alert :if={@form.errors != []} color="danger" title="We couldn't save your changes" hide_close>
  Please review the highlighted fields below and try again.
</.alert>

Trial expiration notice

Surface an actionable warning with an inline upgrade link:

<.alert
  color="warning"
  title="Trial Ending Soon"
  subtitle={"#{@trial_days_left} days left"}
>
  Upgrade to keep access to advanced features after your trial ends.

  <div class="mt-4">
    <.button size="xs" navigate={~p"/billing/upgrade"}>Upgrade Plan</.button>
  </div>
</.alert>

Dismissible system announcement

Persist the dismissal on the server so the alert does not return on the next render:

<.alert
  :if={@show_changelog_notice}
  color="info"
  title="What's new"
  on_close={JS.push("dismiss_changelog_notice")}
>
  We've redesigned the dashboard. Click any widget to learn more.
</.alert>

Critical connection failure

Combine hide_close with a custom icon for an alert the user can't dismiss until the app recovers:

<.alert color="danger" title="Connection Lost" hide_close>
  <:icon>
    <.icon name="hero-wifi-slash" class="size-4.5" />
  </:icon>
  We're having trouble reaching the server. Reconnecting...
</.alert>

Maintenance window banner

A persistent informational banner inside a layout:

<.alert color="info" title="Scheduled Maintenance" subtitle="2:00 AM UTC" hide_close>
  Reports may be temporarily unavailable on Saturday during system updates.
</.alert>