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.

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 :any

This value will be used as aria label. Consider overriding it in case your

Read more Read less
"close"

app is served in different languages.

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.

icon :slot

Optional slot to render an icon.

Required inner_block * :slot

The main content of the alert.

This is an alert.