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