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>
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
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| align | :center | :inherit | :justify | :left | :right | :inherit | Set the text-align on the component. |
| color | any framework-provided color | :slate | The text color to use. |
| element | Any HTML Element | :p | HTML element to use. |
| extend_class | string | Adds additional classes. | |
| margin | bool | true | If true, the text will have margin. |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| variant | :h1 | :h2 | :h3 | :h4 | :p | :p | The links to use. |