FAB / Speed Dial

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).

FAB and Speed Dial (vertical)

Click or focus the F button in the corner

Preview
Dart

FAB and Speed Dial with SVG icons

Preview
Dart

FAB and Speed Dial with labels

Text labels for each button

Preview
Label A
Label B
Label C
Dart

FAB and Speed Dial with rectangle buttons

You can remove the btn-circle class if you want normal buttons

Preview
Dart

FAB and Speed Dial with labels and fab-close button

When FAB is open the original button gets replaced by a Close Button

Preview
Closeclose
Label A
Label B
Label C
Dart

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

Preview
Main ActionM
Label A
Label B
Label C
Dart

A single FAB (Floating Action Button)

If you only want one button in the corner of page

Preview
Dart

FAB Flower and Speed Dial

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.

Preview
M
Dart

FAB and Flower Speed Dial with SVG icons

Preview
edit
Dart

FAB and Flower Speed Dial with tooltip

There's no space for a text label in a quarter circle, so tooltips are used to indicate the button's function

Preview
M
Dart