Getting Started
What is LiveToast?
LiveToast is a drop-in replacement for your `flash-group` component. It has two main components/features:
- It provides a toast message system, that you can call from a function in your LiveView components.
- It also continues to render your app's flash messages, in the same style, so your users can't tell the difference (you should migrate them to the toast system, though!)
Demo
Here's a sneak peak of some of the customization options LiveToast provides:
Toasts
Regular calls to send_toast
will render a toast message with the default styles.
Update
If you want to update an existing toast, you can call
send_toast
with the same UUID multiple times.
Flashes
LiveToast also continues to render your app's flash messages, in the same style as the new toasts.
You can also use arbitrary severity levels. If you want to add another level like "warning", refer to [the documentation here](https://hexdocs.pm/live_toast/readme.html#custom-severity-levels).
Position
The default component can be anchored to the top right, top left, bottom right, or bottom left of the screen.
Titles
You may pass an optional :title
string to send_toast.
Icons
You may pass an optional :icon
function to send_toast. It is expected to be a function component, which takes assigns and returns heex.
Actions
You may pass an optional :action
function to send_toast. It is expected to be a function component, which takes assigns and returns heex.
Kitchen Sink
If you need total customization, you may pass a
:component
function to send_toast. It is expected to be a function component, which takes assigns and returns heex.
It will totally take over rendering for that call, so that you can render totally custom toasts. It receives all the assigns of the built in toast function. See the default implementation in GitHub for an example.