The FAB (Floating Action Button) stays in the bottom corner of the
screen. It includes a focusable and accessible element with the
button role. Clicking or focusing it shows additional buttons
(known as Speed Dial buttons) in a vertical arrangement or a flower
shape (quarter circle).
A simple FAB renders a single floating button. Pass DaisyUI
button classes like btn-primary, btn-circle, and btn-lg to
style the trigger.
Add action buttons that appear when the FAB is clicked or
focused. Action buttons are rendered as standard
ButtonComponent elements.
= daisy_fab do |fab|
- fab.with_button(css: "btn-primary btn-circle btn-lg") do
= hero_icon "plus", css: "size-6"
- fab.with_action(css: "btn-circle btn-lg") do
= hero_icon "camera", css: "size-6"
- fab.with_action(css: "btn-circle btn-lg") do
= hero_icon "photo", css: "size-6"
- fab.with_action(css: "btn-circle btn-lg") do
= hero_icon "microphone", css: "size-6"
Add the fab-flower CSS class to arrange the speed dial buttons
in a quarter-circle (flower) pattern instead of a vertical stack.
Add a main_action slot to show a primary action button when the
FAB is opened. Use either main_action or close, not both.
= daisy_fab do |fab|
- fab.with_button(css: "btn-circle btn-lg") do
= heroicon "plus", css: "size-6"
- fab.with_main_action do
= daisy_button(css: "btn-primary") { "Save" }
- fab.with_action(css: "btn-circle btn-lg") do
= heroicon "camera", css: "size-6"
- fab.with_action(css: "btn-circle btn-lg") do
= heroicon "photo", css: "size-6"
Use with_activator to provide a fully custom trigger element.
The role="button" and tabindex="0" attributes are
automatically added for accessibility.
= daisy_fab do |fab|
- fab.with_activator(css: "btn btn-secondary btn-circle btn-lg") do
= hero_icon "heart", css: "size-6"
- fab.with_action(css: "btn-circle btn-lg") do
= hero_icon "share", css: "size-6"
- fab.with_action(css: "btn-circle btn-lg") do
= hero_icon "bookmark", css: "size-6"
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.