Components
Alerts
Alerts
Alerts are elements that provide a subtle way to bring important information to the users attention.
Default
This is an info alert
This is a success alert
This is a warning alert
This is a danger alert that is very long
<.alert color="info">
This is an info alert
</.alert>
<.alert color="success" label="This is a success alert" />
<.alert color="warning" label="This is a warning alert" />
<.alert color="danger" label="This is a danger alert that is very long" />
With icon
This is an info alert
This is a success alert
This is a warning alert
This is a danger alert that is very long
<.alert with_icon color="info" label="This is an info alert" />
<.alert with_icon color="success" label="This is a success alert" />
<.alert with_icon color="warning" label="This is a warning alert" />
<.alert with_icon
color="danger">
This is a danger alert that is very long
</.alert>
Dismissable
This is an info alert
This is a success alert
This is a warning alert
This is a danger alert that is very long
<.alert
with_icon
close_button_properties={["phx-click": "do_something"]}
color="info"
label="This is an info alert"
/>
<.alert
with_icon
close_button_properties={["phx-click": "do_something"]}
color="success"
label="This is a success alert"
/>
<.alert
with_icon
close_button_properties={["phx-click": "do_something"]}
color="warning"
label="This is a warning alert"
/>
<.alert with_icon close_button_properties={["phx-click": "do_something"]} color="danger">
This is a danger alert 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
attr(:color, :string,
default: "info",
values: ["info", "success", "warning", "danger"]
)
attr(:with_icon, :boolean, default: false, doc: "adds some icon base classes")
attr(:class, :string, default: "", doc: "CSS class for parent div")
attr(:heading, :string, default: nil, doc: "label your heading")
attr(:label, :string, default: nil, doc: "label your alert")
attr(:rest, :global)
attr(:close_button_properties, :list,
default: nil,
doc: ~s|a list of properties passed to the close button, eg: close_button_properties={["phx-click": "do_something"]}|
)
slot(:inner_block)