Alerts inform the user about important information or changes to the system.
Alerts come in a variety of flavors and generally have an icon at the start to indicate the type of alert.
= daisy_alert(icon: "archive-box", css: "w-full max-w-100") do |alert|
Standard alerts are gray-t!
= daisy_alert(icon: "information-circle", css: "alert-info w-full max-w-100") do |alert|
Here is some important information!
= daisy_alert(icon: "check-circle", css: "alert-success w-full max-w-100") do |alert|
Success! You did it!
= daisy_alert(icon: "exclamation-triangle", css: "alert-warning w-full max-w-100") do |alert|
Ooh, be careful here!
= daisy_alert(icon: "exclamation-circle", css: "alert-error w-full max-w-100") do |alert|
Uh oh, something went wrong!
If you don't want an icon, you can simply omit it.
= daisy_alert(css: "alert-info w-full max-w-100") do |alert|
Here is some important information!
= daisy_alert(css: "alert-success w-full max-w-100") do |alert|
Success! You did it!
= daisy_alert(css: "alert-warning w-full max-w-100") do |alert|
Ooh, be careful here!
= daisy_alert(css: "alert-error w-full max-w-100") do |alert|
Uh oh, something went wrong!
The alert-vertical modifier stacks the icon above the content. Combine
it with a responsive modifier like sm:alert-horizontal to stack only on
small screens.
= daisy_alert(icon: "information-circle", css: "alert-info alert-vertical w-full max-w-100") do
This alert is always vertical.
= daisy_alert(icon: "check-circle", css: "alert-success alert-vertical sm:alert-horizontal w-full max-w-100") do
This alert is vertical on small screens and horizontal on larger ones.
You can also use a custom icon (or any HTML) if you prefer.
= daisy_alert do |alert|
= loco_icon("star", css: "text-yellow-500")
Custom icon alert!
= daisy_alert do |alert|
%span ❤️
%span Custom emoji alert!
= daisy_alert do |alert|
= daisy_avatar(css: "size-10", src: image_path("avatars/lady-smiling-3.jpg"))
%span Or even Daisy avatars / other elements!
Alerts can also be displayed in soft style.
= daisy_alert(icon: "information-circle", css: "alert-info alert-soft") do
Info alert.
= daisy_alert(icon: "check-circle", css: "alert-success alert-soft") do
Success alert.
= daisy_alert(icon: "exclamation-triangle", css: "alert-warning alert-soft") do
Warning alert.
= daisy_alert(icon: "exclamation-circle", css: "alert-error alert-soft") do
Error alert.
Alerts can also be displayed in outline style.
= daisy_alert(icon: "information-circle", css: "alert-info alert-outline") do
Info alert.
= daisy_alert(icon: "check-circle", css: "alert-success alert-outline") do
Success alert.
= daisy_alert(icon: "exclamation-triangle", css: "alert-warning alert-outline") do
Warning alert.
= daisy_alert(icon: "exclamation-circle", css: "alert-error alert-outline") do
Error alert.
Alerts can also be displayed in dash style.
= daisy_alert(icon: "information-circle", css: "alert-info alert-dash") do
Info alert.
= daisy_alert(icon: "check-circle", css: "alert-success alert-dash") do
Success alert.
= daisy_alert(icon: "exclamation-triangle", css: "alert-warning alert-dash") do
Warning alert.
= daisy_alert(icon: "exclamation-circle", css: "alert-error alert-dash") do
Error alert.
Alerts can be manually closed by clicking the X button. Set closable:
true to show the close button. Click the Reset button to show the
alerts again after they are closed.
= daisy_alert(icon: "information-circle", css: "alert-info w-full max-w-100", closable: true) do
This alert can be closed manually. It has multiple lines of text to show the
close button positioning.
= daisy_alert(icon: "check-circle", css: "alert-success w-full max-w-100", closable: true) do
Success! Click the X to dismiss.
Alerts can auto-dismiss after a specified timeout. Set autoclose: true
and timeout in milliseconds. Click the Reset button to show the
alerts again after they dismiss.
= daisy_alert(icon: "check-circle", css: "alert-success w-full max-w-100", autoclose: true, timeout: 3000) do
This alert will auto-dismiss in 3 seconds.
= daisy_alert(icon: "information-circle", css: "alert-info w-full max-w-100", autoclose: true, timeout: 5000) do
This alert will auto-dismiss in 5 seconds.
Alerts can be converted to clickable links by providing an href
parameter. Use target to control where the link opens.
= daisy_alert(icon: "star", css: "alert-info w-full max-w-100", href: "https://www.youtube.com/watch?v=dQw4w9WgXcQ", target: "_blank") do
Click this alert for a surprise! (opens in new tab)
= daisy_alert(icon: "check-circle", css: "alert-success w-full max-w-100", href: "/api-docs", target: "_blank") do
Click to view documentation.
Alerts can trigger custom Stimulus actions by providing an action
parameter.
You can customize the timeout for each alert. Set autoclose: true with a
custom timeout value. Click the Reset button to show the alerts
again after they dismiss.
= daisy_alert(icon: "check-circle", css: "alert-success w-full max-w-100", autoclose: true, timeout: 2000) do
Dismisses in 2 seconds.
= daisy_alert(icon: "information-circle", css: "alert-info w-full max-w-100", timeout: 5000) do
This alert will not auto-dismiss (autoclose is false by default).
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.