FAB (Floating Action Button) stays in the bottom corner of screen. It includes a focusable and accessible element with button role. Clicking or focusing it shows additional buttons (known as Speed Dial buttons) in a vertical arrangement or a flower shape (quarter circle).
Class name
Type
fab
Component
Container element. It includes a focusable div like <div tabindex="0" role="button" class="btn btn-circle">A</div> and when it gets clicked of focused, it shows more floating buttons
fab-close
Part
Optional class for a close button (or a wrapper of a close button)
fab-main-action
Part
Optional class for the main action button (or a wrapper of the main action button). Either use fab-close or fab-main-action, not both
fab-flower
Modifier
Modifier class for fab to make it open in a quarter circle arrangement instead of vertical
FAB and Speed Dial (vertical)
Click or focus the A button in the corner
F
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-primary">F</div> <!-- buttons that show up when FAB is open --> <button class="$$btn $$btn-lg $$btn-circle">A</button> <button class="$$btn $$btn-lg $$btn-circle">B</button> <button class="$$btn $$btn-lg $$btn-circle">C</button></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-primary">F</div> <!-- buttons that show up when FAB is open --> <button class="$$btn $$btn-lg $$btn-circle">A</button> <button class="$$btn $$btn-lg $$btn-circle">B</button> <button class="$$btn $$btn-lg $$btn-circle">C</button></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-primary">F</div> <!-- buttons that show up when FAB is open --> <button class="$$btn $$btn-lg $$btn-circle">A</button> <button class="$$btn $$btn-lg $$btn-circle">B</button> <button class="$$btn $$btn-lg $$btn-circle">C</button></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-primary">F</div> <!-- buttons that show up when FAB is open --> <button class="$$btn $$btn-lg $$btn-circle">A</button> <button class="$$btn $$btn-lg $$btn-circle">B</button> <button class="$$btn $$btn-lg $$btn-circle">C</button></div>
Why using<div tabindex="0" role="button">instead of a<button>? Safari has aCSS bugsince 2008 that prevents button elements from being focused, so we use divtabindex="0"as a workaround. This approach is accessible with the addition ofrole="button"and functions consistently across all browsers.
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-success">F</div> <!-- buttons that show up when FAB is open --> <div>Label B <button class="$$btn $$btn-lg $$btn-circle">A</button></div> <div>Label C <button class="$$btn $$btn-lg $$btn-circle">B</button></div> <div>Label D <button class="$$btn $$btn-lg $$btn-circle">C</button></div></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-success">F</div> <!-- buttons that show up when FAB is open --> <div>Label B <button class="$$btn $$btn-lg $$btn-circle">A</button></div> <div>Label C <button class="$$btn $$btn-lg $$btn-circle">B</button></div> <div>Label D <button class="$$btn $$btn-lg $$btn-circle">C</button></div></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-success">F</div> <!-- buttons that show up when FAB is open --> <div>Label B <button class="$$btn $$btn-lg $$btn-circle">A</button></div> <div>Label C <button class="$$btn $$btn-lg $$btn-circle">B</button></div> <div>Label D <button class="$$btn $$btn-lg $$btn-circle">C</button></div></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-success">F</div> <!-- buttons that show up when FAB is open --> <div>Label B <button class="$$btn $$btn-lg $$btn-circle">A</button></div> <div>Label C <button class="$$btn $$btn-lg $$btn-circle">B</button></div> <div>Label D <button class="$$btn $$btn-lg $$btn-circle">C</button></div></div>
FAB and Speed Dial with rectangle buttons
You can remove the btn-circle class if you want normal buttons
F
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-success">F</div> <!-- buttons that show up when FAB is open --> <button class="$$btn $$btn-lg">Button A</button> <button class="$$btn $$btn-lg">Button B</button> <button class="$$btn $$btn-lg">Button C</button></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-success">F</div> <!-- buttons that show up when FAB is open --> <button class="$$btn $$btn-lg">Button A</button> <button class="$$btn $$btn-lg">Button B</button> <button class="$$btn $$btn-lg">Button C</button></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-success">F</div> <!-- buttons that show up when FAB is open --> <button class="$$btn $$btn-lg">Button A</button> <button class="$$btn $$btn-lg">Button B</button> <button class="$$btn $$btn-lg">Button C</button></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-success">F</div> <!-- buttons that show up when FAB is open --> <button class="$$btn $$btn-lg">Button A</button> <button class="$$btn $$btn-lg">Button B</button> <button class="$$btn $$btn-lg">Button C</button></div>
FAB and Speed Dial with labels and fab-close button
When FAB is open the original button gets replaced by a Close Button
F
Close ✕
Label A
Label B
Label C
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-info">F</div> <!-- close button should not be focusable so it can close the FAB when clicked. It's just a visual placeholder --> <div class=$$fab-close">Close <span class="$$btn $$btn-circle $$btn-lg $$btn-error">✕</span></div> <!-- buttons that show up when FAB is open --> <div>Label A <button class="$$btn $$btn-lg $$btn-circle">A</button></div> <div>Label B <button class="$$btn $$btn-lg $$btn-circle">B</button></div> <div>Label C <button class="$$btn $$btn-lg $$btn-circle">C</button></div></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-info">F</div> <!-- close button should not be focusable so it can close the FAB when clicked. It's just a visual placeholder --> <div class=$$fab-close">Close <span class="$$btn $$btn-circle $$btn-lg $$btn-error">✕</span></div> <!-- buttons that show up when FAB is open --> <div>Label A <button class="$$btn $$btn-lg $$btn-circle">A</button></div> <div>Label B <button class="$$btn $$btn-lg $$btn-circle">B</button></div> <div>Label C <button class="$$btn $$btn-lg $$btn-circle">C</button></div></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-info">F</div> <!-- close button should not be focusable so it can close the FAB when clicked. It's just a visual placeholder --> <div class=$$fab-close">Close <span class="$$btn $$btn-circle $$btn-lg $$btn-error">✕</span></div> <!-- buttons that show up when FAB is open --> <div>Label A <button class="$$btn $$btn-lg $$btn-circle">A</button></div> <div>Label B <button class="$$btn $$btn-lg $$btn-circle">B</button></div> <div>Label C <button class="$$btn $$btn-lg $$btn-circle">C</button></div></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-info">F</div> <!-- close button should not be focusable so it can close the FAB when clicked. It's just a visual placeholder --> <div class=$$fab-close">Close <span class="$$btn $$btn-circle $$btn-lg $$btn-error">✕</span></div> <!-- buttons that show up when FAB is open --> <div>Label A <button class="$$btn $$btn-lg $$btn-circle">A</button></div> <div>Label B <button class="$$btn $$btn-lg $$btn-circle">B</button></div> <div>Label C <button class="$$btn $$btn-lg $$btn-circle">C</button></div></div>
FAB and Speed Dial with labels and fab-main-action Button
When FAB is open the original button gets replaced by a Main Action Button
F
Main Action
Label A
Label B
Label C
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-primary">F</div> <!-- Main Action button replaces the original button when FAB is open --> <div class="$$fab-main-action"> Main Action <button class="$$btn $$btn-circle $$btn-secondary $$btn-lg">M</button> </div> <!-- buttons that show up when FAB is open --> <div>Label A <button class="$$btn $$btn-lg $$btn-circle">A</button></div> <div>Label B <button class="$$btn $$btn-lg $$btn-circle">B</button></div> <div>Label C <button class="$$btn $$btn-lg $$btn-circle">C</button></div></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-primary">F</div> <!-- Main Action button replaces the original button when FAB is open --> <div class="$$fab-main-action"> Main Action <button class="$$btn $$btn-circle $$btn-secondary $$btn-lg">M</button> </div> <!-- buttons that show up when FAB is open --> <div>Label A <button class="$$btn $$btn-lg $$btn-circle">A</button></div> <div>Label B <button class="$$btn $$btn-lg $$btn-circle">B</button></div> <div>Label C <button class="$$btn $$btn-lg $$btn-circle">C</button></div></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-primary">F</div> <!-- Main Action button replaces the original button when FAB is open --> <div class="$$fab-main-action"> Main Action <button class="$$btn $$btn-circle $$btn-secondary $$btn-lg">M</button> </div> <!-- buttons that show up when FAB is open --> <div>Label A <button class="$$btn $$btn-lg $$btn-circle">A</button></div> <div>Label B <button class="$$btn $$btn-lg $$btn-circle">B</button></div> <div>Label C <button class="$$btn $$btn-lg $$btn-circle">C</button></div></div>
<div class="$$fab"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-primary">F</div> <!-- Main Action button replaces the original button when FAB is open --> <div class="$$fab-main-action"> Main Action <button class="$$btn $$btn-circle $$btn-secondary $$btn-lg">M</button> </div> <!-- buttons that show up when FAB is open --> <div>Label A <button class="$$btn $$btn-lg $$btn-circle">A</button></div> <div>Label B <button class="$$btn $$btn-lg $$btn-circle">B</button></div> <div>Label C <button class="$$btn $$btn-lg $$btn-circle">C</button></div></div>
fab-flower modifier class will open the button in a quarter circle instead of a vertical. fab-flower can fit 1 to 4 buttons, not including the original button, the fab-close button or the fab-main-action button.
F
<div class="$$fab $$fab-flower"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-success">F</div> <!-- Main Action button replaces the original button when FAB is open --> <button class="$$fab-main-action $$btn $$btn-circle $$btn-lg">M</button> <!-- buttons that show up when FAB is open --> <button class="$$btn $$btn-lg $$btn-circle">A</button> <button class="$$btn $$btn-lg $$btn-circle">B</button> <button class="$$btn $$btn-lg $$btn-circle">C</button> <button class="$$btn $$btn-lg $$btn-circle">D</button></div>
<div class="$$fab $$fab-flower"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-success">F</div> <!-- Main Action button replaces the original button when FAB is open --> <button class="$$fab-main-action $$btn $$btn-circle $$btn-lg">M</button> <!-- buttons that show up when FAB is open --> <button class="$$btn $$btn-lg $$btn-circle">A</button> <button class="$$btn $$btn-lg $$btn-circle">B</button> <button class="$$btn $$btn-lg $$btn-circle">C</button> <button class="$$btn $$btn-lg $$btn-circle">D</button></div>
<div class="$$fab $$fab-flower"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-success">F</div> <!-- Main Action button replaces the original button when FAB is open --> <button class="$$fab-main-action $$btn $$btn-circle $$btn-lg">M</button> <!-- buttons that show up when FAB is open --> <button class="$$btn $$btn-lg $$btn-circle">A</button> <button class="$$btn $$btn-lg $$btn-circle">B</button> <button class="$$btn $$btn-lg $$btn-circle">C</button> <button class="$$btn $$btn-lg $$btn-circle">D</button></div>
<div class="$$fab $$fab-flower"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-circle $$btn-success">F</div> <!-- Main Action button replaces the original button when FAB is open --> <button class="$$fab-main-action $$btn $$btn-circle $$btn-lg">M</button> <!-- buttons that show up when FAB is open --> <button class="$$btn $$btn-lg $$btn-circle">A</button> <button class="$$btn $$btn-lg $$btn-circle">B</button> <button class="$$btn $$btn-lg $$btn-circle">C</button> <button class="$$btn $$btn-lg $$btn-circle">D</button></div>
There's no space for a text label in a quarter circle, so tooltips are used to indicate the button's function
F
<div class="$$fab $$fab-flower"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-info $$btn-circle">F</div> <!-- Main Action button replaces the original button when FAB is open --> <button class="$$fab-main-action $$btn $$btn-circle $$btn-lg $$btn-success">M</button> <!-- buttons that show up when FAB is open --> <div class="$$tooltip $$tooltip-left" data-tip="Label A"> <button class="$$btn $$btn-lg $$btn-circle">A</button> </div> <div class="$$tooltip $$tooltip-left" data-tip="Label B"> <button class="$$btn $$btn-lg $$btn-circle">B</button> </div> <div class="$$tooltip" data-tip="Label C"> <button class="$$btn $$btn-lg $$btn-circle">C</button> </div> <div class="$$tooltip" data-tip="Label D"> <button class="$$btn $$btn-lg $$btn-circle">D</button> </div></div>
<div class="$$fab $$fab-flower"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-info $$btn-circle">F</div> <!-- Main Action button replaces the original button when FAB is open --> <button class="$$fab-main-action $$btn $$btn-circle $$btn-lg $$btn-success">M</button> <!-- buttons that show up when FAB is open --> <div class="$$tooltip $$tooltip-left" data-tip="Label A"> <button class="$$btn $$btn-lg $$btn-circle">A</button> </div> <div class="$$tooltip $$tooltip-left" data-tip="Label B"> <button class="$$btn $$btn-lg $$btn-circle">B</button> </div> <div class="$$tooltip" data-tip="Label C"> <button class="$$btn $$btn-lg $$btn-circle">C</button> </div> <div class="$$tooltip" data-tip="Label D"> <button class="$$btn $$btn-lg $$btn-circle">D</button> </div></div>
<div class="$$fab $$fab-flower"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-info $$btn-circle">F</div> <!-- Main Action button replaces the original button when FAB is open --> <button class="$$fab-main-action $$btn $$btn-circle $$btn-lg $$btn-success">M</button> <!-- buttons that show up when FAB is open --> <div class="$$tooltip $$tooltip-left" data-tip="Label A"> <button class="$$btn $$btn-lg $$btn-circle">A</button> </div> <div class="$$tooltip $$tooltip-left" data-tip="Label B"> <button class="$$btn $$btn-lg $$btn-circle">B</button> </div> <div class="$$tooltip" data-tip="Label C"> <button class="$$btn $$btn-lg $$btn-circle">C</button> </div> <div class="$$tooltip" data-tip="Label D"> <button class="$$btn $$btn-lg $$btn-circle">D</button> </div></div>
<div class="$$fab $$fab-flower"> <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility --> <div tabindex="0" role="button" class="$$btn $$btn-lg $$btn-info $$btn-circle">F</div> <!-- Main Action button replaces the original button when FAB is open --> <button class="$$fab-main-action $$btn $$btn-circle $$btn-lg $$btn-success">M</button> <!-- buttons that show up when FAB is open --> <div class="$$tooltip $$tooltip-left" data-tip="Label A"> <button class="$$btn $$btn-lg $$btn-circle">A</button> </div> <div class="$$tooltip $$tooltip-left" data-tip="Label B"> <button class="$$btn $$btn-lg $$btn-circle">B</button> </div> <div class="$$tooltip" data-tip="Label C"> <button class="$$btn $$btn-lg $$btn-circle">C</button> </div> <div class="$$tooltip" data-tip="Label D"> <button class="$$btn $$btn-lg $$btn-circle">D</button> </div></div>