An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
Below you can view various demos with example markup.
The alert component comes with three variants: filled, outlined, and standard (default).
<.alert
extend_class="mb-4"
severity="success"
variant="filled"
>
This is a "filled" success alert — check it out!
</.alert>
<.alert
extend_class="mb-4"
severity="success"
variant="outlined"
>
This is an "outlined" success alert — check it out!
</.alert>
<.alert severity="success">
This is a "standard" success alert — check it out!
</.alert>
The alert component comes with four severities: error, warning, info (default), and success.
<.alert
extend_class="mb-4"
severity="error"
>
This is an error alert — check it out!
</.alert>
<.alert
extend_class="mb-4"
severity="warning"
>
This is a warning alert — check it out!
</.alert>
<.alert
extend_class="mb-4"
severity="info"
>
This is an info alert — check it out!
</.alert>
<.alert severity="success">
This is a success alert — check it out!
</.alert>
You can use the :title slot to display a formatted title above the content.
<.alert
extend_class="mb-4"
severity="error"
>
<:title>
Error
</:title>
<:content>
This is an error alert — check it out!
</:content>
</.alert>
<.alert
extend_class="mb-4"
severity="warning"
>
<:title>
Warning
</:title>
<:content>
This is a warning alert — check it out!
</:content>
</.alert>
<.alert
extend_class="mb-4"
severity="info"
>
<:title>
Info
</:title>
<:content>
This is an info alert — check it out!
</:content>
</.alert>
<.alert severity="success">
<:title>
Success
</:title>
<:content>
This is a success alert — check it out!
</:content>
</.alert>
An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert.
If action phx-click or other Heroicon-specific attributes are set, a close icon is displayed. The action can be used as a slot to provide an alternative action, for example using a Button.
<.alert
extend_class="mb-4"
action={["phx-click": "lv:clear-flash"]}
>
<:content>
This is an info alert — check it out!
</:content>
</.alert>
<.alert>
<:content>
This is an info alert — check it out!
</:content>
<:action>
<.button
color="slate"
size="sm"
variant="text"
>
Undo
</.button>
</:action>
</.alert>
The icon prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity.
Setting the icon to false will remove the icon altogether.
<.alert
extend_class="mb-4"
icon={[name: "archive"]}
>
This is an info alert — check it out!
</.alert>
<.alert extend_class="mb-4">
<:icon>
<.heroicon color="pink" name="cake"/>
</:icon>
<:content>
This is an info alert — check it out!
</:content>
</.alert>
<.alert icon={false}>
This is an info alert — check it out!
</.alert>
API documentation for the component. Learn about imports and available attributes.
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.Alert, only: [alert: 1]
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| action | heroicon attrs | slot | ||
| content* | inner_block | slot | string | ||
| extend_class | string | Adds additional classes. | |
| icon | heroicon attrs | slot | [] | |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| severity | string | info | |
| title | string | slot | ||
| variant | "filled" | "outlined" | "standard" | standard |