Alerts
A prominent message tied to state: information, success, caution or failure.
Semantic colours
A prominent message tied to state, shown here in the outline variant - the coloured border and glyph on a calm surface. Danger and warning announce as role="alert" (assertive); info, success and gray as polite status - the same kind split the toast uses. with_icon adds the matching glyph. Drop the variant attribute and you get light, the filled default.
<div class="w-full space-y-3">
<.alert color="info" variant="outline" with_icon>
A new version of this page is available.
</.alert>
<.alert color="success" variant="outline" with_icon>Your changes were saved.</.alert>
<.alert color="warning" variant="outline" with_icon>Your trial ends in 3 days.</.alert>
<.alert color="danger" variant="outline" with_icon>
Payment failed. Check your card details.
</.alert>
</div>
Variants
The classic variants paint the surface in the semantic colour: light stays light in both modes, soft adapts to dark, dark is maximum emphasis, outline suits calm surfaces. callout follows the toast's principle instead - a neutral panel with colour as accent, a left bar and a solid icon (tinted surfaces take outline icons, neutral surfaces take solid ones).
Callout, the toast-cohesive form
<div class="w-full space-y-3">
<.alert color="gray" variant="light" with_icon>
Light, the default. Stays light even in dark mode.
</.alert>
<.alert color="gray" variant="soft" with_icon>Soft adapts to dark mode.</.alert>
<.alert color="gray" variant="dark" with_icon>Dark, maximum emphasis.</.alert>
<.alert color="gray" variant="outline" with_icon>Outline, for calm surfaces.</.alert>
<.alert color="success" variant="callout" with_icon heading="Callout, the toast-cohesive form">
Neutral panel, colour as accent - a left bar and a solid icon.
</.alert>
</div>
Actions and custom icons
The :actions slot renders buttons or links under the message, indented with the text column; icon="hero-..." swaps the kind icon for any Heroicon.
Update available
Password expiring
<div class="w-full space-y-4">
<.alert color="info" variant="callout" with_icon heading="Update available">
Version 4.8 is ready to install.
<:actions>
<.button size="sm" variant="soft">View notes</.button>
<.button size="sm" variant="ghost" color="gray">Later</.button>
</:actions>
</.alert>
<.alert color="warning" variant="soft" icon="hero-lock-closed" heading="Password expiring">
Your password expires in 3 days - a custom icon via icon="hero-lock-closed".
</.alert>
</div>
Dismissible
Pass on_dismiss any LiveView.JS command and the cross appears with hide behaviour built in - the alert fades out client-side and your command runs alongside (a CustomEvent here; JS.push to tell your LiveView instead). close_button_properties is the older path: a list of attributes for the button, phx-click included, wired yourself.
Invite sent
<div class="w-full">
<.alert
color="success"
with_icon
heading="Invite sent"
on_dismiss={JS.dispatch("myapp:alert-dismissed")}
>
We emailed Ana a link to join your workspace.
</.alert>
</div>
Properties
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
CSS class for parent div |
close_button_properties
|
list |
nil
|
a list of properties passed to the close button |
color
|
string |
"info"
|
one of: "info", "success", "warning", "danger", "gray"
|
heading
|
string |
nil
|
label your heading |
icon
|
string |
nil
|
a Heroicon name to use instead of the kind icon (e.g. "hero-lock-closed" for a security notice); implies with_icon |
label
|
string |
nil
|
label your alert |
on_dismiss
|
{:struct, Phoenix.LiveView.JS} |
%Phoenix.LiveView.JS{ops: []}
|
JS commands to run when the alert is dismissed. Any non-empty command (e.g. JS.dispatch("my-app:alert-dismissed")) adds a close button with built-in hide behaviour; the empty default and nil render no button - so conditionally passing nil is safe. |
rest
|
global |
||
variant
|
string |
"light"
|
The variant of the alert. light/soft/dark/outline are the tinted-surface school; callout is the toast-cohesive form - neutral panel surface, a coloured left accent bar, and a solid kind icon (colour as accent, not as surface)
one of: "light", "soft", "dark", "outline", "callout"
|
with_icon
|
boolean |
false
|
adds some icon base classes |
:actions
slot
|
slot |
buttons or links rendered under the message, indented with the text column | |
:inner_block
slot
|
slot |