Alert

Inline status message with semantic colors, optional icon, title, subtitle, and dismiss.

Basic

Your changes have been saved.
.heex 
<.alert class="w-full max-w-md">Your changes have been saved.</.alert>

Colors

Neutral system message.
Branded or featured announcement.
A new version is available.
Your order has been processed.
.heex 
<div class="w-full max-w-md space-y-4">
  <.alert>Neutral system message.</.alert>
  <.alert color="primary">Branded or featured announcement.</.alert>
  <.alert color="info">A new version is available.</.alert>
  <.alert color="success">Your order has been processed.</.alert>
  <.alert color="warning">Your session expires in 5 minutes.</.alert>
  <.alert color="danger">Unable to connect to the server.</.alert>
</div>

With title

Profile updated

Your profile changes have been saved.
.heex 
<div class="w-full max-w-md space-y-4">
  <.alert color="success" title="Profile updated">
    Your profile changes have been saved.
  </.alert>

  <.alert color="warning" title="Review required">
    Please double-check the highlighted fields before submitting.
  </.alert>

  <.alert color="danger" title="Payment failed">
    We could not process your card. Try a different payment method.
  </.alert>
</div>

With title and subtitle

Set subtitle to render a short context tag inline next to the title, like a code, category, or timestamp.

Scheduled maintenance

2:00 AM UTC

Reports may be temporarily unavailable on Saturday during system updates.
.heex 
<div class="w-full max-w-md space-y-4">
  <.alert color="info" title="Scheduled maintenance" subtitle="2:00 AM UTC">
    Reports may be temporarily unavailable on Saturday during system updates.
  </.alert>

  <.alert color="warning" title="Trial ending" subtitle="3 days left">
    Upgrade to keep advanced features after your trial.
  </.alert>

  <.alert color="danger" title="Build failed" subtitle="exit 137">
    The runner ran out of memory. Bump the worker tier and retry.
  </.alert>
</div>

Custom icon

Pass an :icon slot to replace the default status glyph. Match the default size-5 bounding box to keep alerts aligned.

What's new

We've redesigned the dashboard. Click any widget to learn more.

3 new notifications

Two pull requests need your review and one deploy is waiting.
.heex 
<.alert color="info" title="What's new">
  <:icon>
    <.icon name="hero-megaphone-solid" class="size-5" />
  </:icon>
  We've redesigned the dashboard. Click any widget to learn more.
</.alert>

<.alert color="warning" title="Pro tip">
  <:icon>
    <.icon name="hero-light-bulb-solid" class="size-5" />
  </:icon>
  Press <kbd>Cmd</kbd>+<kbd>K</kbd> to jump to any project.
</.alert>

<.alert color="primary" title="3 new notifications">
  <:icon>
    <.icon name="hero-bell-solid" class="size-5" />
  </:icon>
  Two pull requests need your review and one deploy is waiting.
</.alert>

Hide icon

Set hide_icon to drop the leading glyph when the color and title already convey meaning.

Saved.

Tip

Hold Shift to multi-select rows in any table.
.heex 
<div class="w-full max-w-md space-y-4">
  <.alert color="success" hide_icon>
    Saved.
  </.alert>

  <.alert color="info" title="Tip" hide_icon>
    Hold Shift to multi-select rows in any table.
  </.alert>
</div>

Persistent (no close)

Use hide_close for permanent banners or alerts replaced by a server-driven render.

.heex 
<div class="w-full max-w-md space-y-4">
  <.alert color="warning" title="Read-only mode" hide_close>
    You don't have edit access on this workspace.
  </.alert>

  <.alert color="danger" title="Region degraded" hide_close>
    We're investigating elevated error rates in eu-west-2.
  </.alert>
</div>

With action buttons

The default slot accepts arbitrary HEEx, so you can render buttons or links beneath the body.

Session expiring

Your session ends in 5 minutes.
.heex 
<div class="w-full max-w-md space-y-4">
  <.alert color="warning" title="Unsaved changes">
    Leaving this page will discard your edits.
    <div class="mt-3 flex gap-2">
      <.button size="xs" color="warning" variant="surface">Save changes</.button>
      <.button size="xs" variant="ghost" color="warning">Discard</.button>
    </div>
  </.alert>

  <.alert color="info" title="Session expiring">
    Your session ends in 5 minutes.
    <div class="mt-3">
      <.button size="xs" color="info" variant="surface">Extend session</.button>
    </div>
  </.alert>
</div>

Server-side dismissal

Pass a Phoenix.LiveView.JS command to on_close. Your push runs first, then the built-in 200ms fade-and-scale animation hides the alert.

What's new

We've updated our terms of service. Review the changes before continuing.
.heex 
<.alert
  color="info"
  title="What's new"
  on_close={JS.push("dismiss_announcement", value: %{id: @announcement.id})}
>
  We've updated our terms of service. Review the changes before continuing.
</.alert>
.ex 
def handle_event("dismiss_announcement", %{"id" => _id}, socket) do
  # Mark the announcement as dismissed
  {:noreply, socket}
end

Drop the rounded corners and side borders with class so the alert spans the layout edge to edge.

Special offer: 50% off your first month with code WELCOME50.
.heex 
<.alert color="info" class="rounded-none border-x-0">
  <div class="text-center flex items-center">
    Special offer: 50% off your first month with code WELCOME50.
    <.button size="xs" variant="surface" color="info" class="ml-2">Learn more</.button>
  </div>
</.alert>

Form error summary

Top-of-form summary that pairs danger with hide_close so the user must address the listed errors.

.heex 
<div class="w-full max-w-md">
  <.alert color="danger" hide_close title="We couldn't save your changes">
    Please review the highlighted fields below and try again.
    <ul class="mt-2 list-disc list-inside space-y-1">
      <li>Email is required.</li>
      <li>Password must be at least 8 characters.</li>
      <li>Display name cannot be blank.</li>
    </ul>
  </.alert>
</div>