- 1.4.1

Alert

The alert component serves as a notification mechanism to provide feedback to the user.

Read more Read less

For supplementary information that doesn't require the user's immediate attention, use callout/1 instead.

Usage

Minimal example:

<.alert id="some-alert"></.alert>

With title, icon and level:

<.alert id="some-alert" level={:info} title="Info">
  message
  <:icon><Heroicon.light_bulb /></:icon>
</.alert>

Dismissable, with an icon in the close button:

<.alert id="some-alert" on_close={JS.push("dismiss")} close_label="Dismiss">
  message
  <:close><Heroicon.x_mark /></:close>
</.alert>

With an action:

<.alert id="some-alert" title="Session expired">
  Your session has expired. Sign in again to continue.
  <:action>
    <.button phx-click="sign-in">Sign in</.button>
  </:action>
</.alert>

The close_label is the button's accessible name, so it is needed whether or not the :close slot is filled.

Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
close_label :string

Aria label for the close button. This value should be translated to the

 Read more Read less
"Close"

language in which the rest of the page is displayed.
Required id * :string
level :string "info"
on_close :any

JS command to run when the close button is clicked. If not set, no close

 Read more Read less

button is rendered.
rest :global

Any additional HTML attributes.
title :string

An optional title.
action :slot

A slot for action buttons related to the alert, rendered after the message.
close :slot

The content for the close button. Defaults to the value of close_label.
icon :slot

Optional slot to render an icon.
Required inner_block * :slot

The main content of the alert.

 
This is an alert.