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>
Attribute Type Documentation Default Value
class :any Any additional classes to be added. 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 :any This value will be used as aria label. Consider overriding it in case your app is served in different languages. "close"
Required id * :string
level :string "info"
on_close :any JS command to run when the close button is clicked. If not set, no close button is rendered.
rest :global Any additional HTML attributes.
title :string An optional title.
icon :slot Optional slot to render an icon.
Required inner_block * :slot The main content of the alert.
This is an alert.