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" variant="dark" label="This is an info alert" />
<.alert with_icon color="success" variant="dark" label="This is a success alert" />
<.alert with_icon color="warning" variant="dark" label="This is a warning alert" />
<.alert with_icon color="danger" variant="dark">
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
variant="soft"
close_button_properties={["phx-click": "do_something"]}
color="info"
label="This is an info alert"
/>
<.alert
with_icon
variant="soft"
close_button_properties={["phx-click": "do_something"]}
color="success"
label="This is a success alert"
/>
<.alert
with_icon
variant="soft"
close_button_properties={["phx-click": "do_something"]}
color="warning"
label="This is a warning alert"
/>
<.alert
variant="soft"
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
variant="outline"
color="success"
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
variant="outline"
color="warning"
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(:variant, :string,
default: "light",
values: ["light", "soft", "dark", "outline"],
doc: "The variant of the alert"
)
attr(:with_icon, :boolean, default: false, doc: "adds some icon base classes")
attr(:class, :any, default: nil, 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: "a list of properties passed to the close button"
)
slot(:inner_block)