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