Toasts are used to show a message to the user that is not critical, but important. They are often used to show a message that is not part of the main content flow and can be dismissed after a timeout or by a user.
The Toast component relies on the Alert component's Stimulus controller for auto-dismiss and manual close functionality. Ensure you have registered the AlertController in your application's Stimulus controllers index file.
For NPM package users, import and register the controller:
import { AlertController } from '@profoundry-us/loco_motion'
application.register('loco-alert', AlertController)The Toast component is a simple wrapper that positions it's contents at various spots on the page, usually in the bottom right corner. Click the Reset button to show the toasts again after they dismiss.
These toasts will appear at the top right of the entire page.
These toasts will appear at the top right of the entire page.
:markdown
These toasts will appear at the top right of the entire page.
= daisy_toast(css: "toast-top toast-end z-50") do
= daisy_alert(icon: "check-circle", css: "alert-success text-white", closable: true, icon_html: { variant: :outline }) do
Yay! Something went well!
= daisy_alert(icon: "exclamation-circle", css: "alert-error text-white", closable: true, icon_html: { variant: :outline }) do
Uh oh! Something went wrong... (click X to dismiss)
Toasts can be positioned at various locations on the page using CSS modifiers. Click the Reset button to show the toasts again after they dismiss.
This toast will appear at the top left of the entire page.
This toast will appear at the top left of the entire page.
:markdown
This toast will appear at the top left of the entire page.
= daisy_toast(css: "toast-top toast-start z-50") do
= daisy_alert(icon: "information-circle", css: "alert-info text-white", closable: true, icon_html: { variant: :outline }) do
Top-left toast
Toasts can contain clickable link alerts that navigate to other pages or resources. Click the Reset button to show the toasts again after they dismiss.
These toasts will appear at the bottom right of the entire page and will disappear after 20 & 25 seconds. Click Reset to show them again.
These toasts will appear at the bottom right of the entire page and will disappear after 20 & 25 seconds. Click Reset to show them again.
.px-10
:markdown
These toasts will appear at the bottom right of the entire page and will
disappear after 20 & 25 seconds. Click **Reset** to show them again.
= daisy_toast(css: "z-50") do
= daisy_alert(icon: "check-circle", css: "alert-success text-white", href: "/api-docs", target: "_blank", autoclose: true, timeout: 20000, icon_html: { variant: :outline }) do
View API documentation (opens in new tab)
= daisy_alert(icon: "star", css: "alert-info text-white", href: "https://www.youtube.com/watch?v=dQw4w9WgXcQ", target: "_blank", autoclose: true, timeout: 25000, icon_html: { variant: :outline }) do
Click for a surprise! (opens in new tab)
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.