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", icon_html: { variant: :outline }, css: "w-100") do |alert|
Standard alerts are gray-t!
= daisy_alert(icon: "information-circle", css: "alert-info w-100", icon_html: { variant: :outline }) do |alert|
Here is some important information!
= daisy_alert(icon: "check-circle", css: "alert-success w-100", icon_html: { variant: :outline }) do |alert|
Success! You did it!
= daisy_alert(icon: "exclamation-triangle", css: "alert-warning w-100", icon_html: { variant: :outline }) do |alert|
Ooh, be careful here!
= daisy_alert(icon: "exclamation-circle", css: "alert-error w-100", icon_html: { variant: :outline }) 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-100") do |alert|
Here is some important information!
= daisy_alert(css: "alert-success w-100") do |alert|
Success! You did it!
= daisy_alert(css: "alert-warning w-100") do |alert|
Ooh, be careful here!
= daisy_alert(css: "alert-error w-100") do |alert|
Uh oh, something went wrong!
You can also use a custom icon (or any HTML) if you prefer.
= daisy_alert do |alert|
= hero_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.
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.