Components
Toast
Toast
Notifications with the modern interaction grammar, LiveView-native: a collapsed stack that
expands on hover, timers that pause while you read, swipe to dismiss, six positions. Push from
the server with send_toast, update a toast in place, or fire from
the client - the buttons below are live.
Fire from anywhere
One toast_group in the layout catches everything: Toast.send_toast/3 from the server, put_flash for free, or - as here - a plain petal:toast CustomEvent from the client. Fire a few and hover the stack.
<%!-- once, in your root layout: <.toast_group flash={@flash} /> --%>
<div class="flex flex-wrap items-center justify-center gap-2">
<.button
color="gray"
variant="outline"
phx-click={
JS.dispatch("petal:toast",
detail: %{
kind: "success",
title: "Changes saved",
description: "Your profile is up to date."
}
)
}
>
Success
</.button>
<.button
color="gray"
variant="outline"
phx-click={
JS.dispatch("petal:toast",
detail: %{kind: "danger", title: "Export failed", description: "The server returned 500."}
)
}
>
Danger
</.button>
<.button
color="gray"
variant="outline"
phx-click={JS.dispatch("petal:toast", detail: %{kind: "info", title: "Deploy started"})}
>
Info
</.button>
</div>
The full severity set
Seven kinds: info, success, warning, danger, loading and neutral - plus :error, which normalises to danger so put_flash(:error, ...) lands right. Warning and danger announce assertively (role=alert), the rest politely. The group itself takes position (six corners), max (stack cap) and duration (auto-dismiss default).
<div class="flex flex-wrap items-center justify-center gap-2">
<.button
color="gray"
variant="outline"
phx-click={
JS.dispatch("petal:toast",
detail: %{kind: "warning", title: "Certificate expiring", description: "7 days left."}
)
}
>
Warning
</.button>
<.button
color="gray"
variant="outline"
phx-click={
JS.dispatch("petal:toast", detail: %{kind: "loading", title: "Uploading archive..."})
}
>
Loading
</.button>
<.button
color="gray"
variant="outline"
phx-click={JS.dispatch("petal:toast", detail: %{kind: "neutral", title: "Draft restored"})}
>
Neutral
</.button>
</div>
Properties
| Attribute | Type | Default | Description |
|---|---|---|---|
duration
|
integer |
5000
|
default auto-dismiss in ms |
flash
|
map |
nil
|
pass @flash to bridge put_flash into toasts automatically (info and error map to their kinds; the flash is cleared once shown) |
id
|
string |
"pc-toast-group"
|
one group per layout |
max
|
integer |
3
|
visible toasts while collapsed - the rest queue behind and surface as older ones leave |
position
|
string |
"bottom-right"
|
where the stack lives
one of: "top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"
|
rest
|
global |