Components Alerts

Alerts

Alerts are elements that provide a subtle way to bring important information to the users attention.
Default
This is an info state
This is a success state
This is a warning state
This is a danger state that is very long 
          <.alert color="info">
  This is an info state
</.alert>
<.alert color="success" label="This is a success state" />
<.alert color="warning" label="This is a warning state" />
<.alert color="danger" label="This is a danger state that is very long" />
With icon
This is an info state
This is a success state
This is a warning state
This is a danger state that is very long 
          <.alert with_icon color="info" label="This is an info state" />
<.alert with_icon color="success" label="This is a success state" />
<.alert with_icon color="warning" label="This is a warning state" />
<.alert with_icon
  color="danger">
  This is a danger state that is very long
</.alert>
Dismissable
This is an info state
This is a success state
This is a warning state
This is a danger state that is very long 
          <.alert
  with_icon
  close_button_properties={["phx-click": "do_something"]}
  color="info"
  label="This is an info state"
/>
<.alert
  with_icon
  close_button_properties={["phx-click": "do_something"]}
  color="success"
  label="This is a success state"
/>
<.alert
  with_icon
  close_button_properties={["phx-click": "do_something"]}
  color="warning"
  label="This is a warning state"
/>
<.alert with_icon close_button_properties={["phx-click": "do_something"]} color="danger">
  This is a danger state that is very long
</.alert>
With optional heading
Optional heading that is too long
This is quite a long paragraph that takes up more than one line.
Optional heading that is too long
This is quite a long paragraph that takes up more than one line.
Optional heading that is too long
This is quite a long paragraph that takes up more than one line. 
          <div class="flex items-start max-w-sm">
  <.alert
    heading="Optional heading that is too long">
    This is quite a long paragraph that takes up more than one line.
  </.alert>
</div>
<div class="flex items-start max-w-sm">
  <.alert
    with_icon
    heading="Optional heading that is too long">
    This is quite a long paragraph that takes up more than one line.
  </.alert>
</div>
<div class="flex items-start max-w-sm">
  <.alert with_icon close_button_properties={["phx-click": "do_something"]} heading="Optional heading that is too long">
    This is quite a long paragraph that takes up more than one line.
  </.alert>
</div>
Properties

Defaults are indicated in bold.

Name Type Options
label :string -
state :string info , `success`, `warning`, `danger`
with_icon :boolean `true`, false
close_button_properties :list -
classes :string -
inner_block :slot -