Floating action button
A fixed square at the bottom end of the viewport for the one primary action.
Examples
FAB
Anatomy
button.fab | Fixed to the bottom end corner, one gutter in, above page content. Solid tone fill and a large shadow. |
> i.icon | The icon, set at the large text size. A single character such as + also works. |
API
| Attribute | Values | Description |
|---|---|---|
aria-label | <text> | Required: the button has no visible text. |
data-tone | accentsuccesswarningdangerinfo | Colours the fill. Default accent. |
data-tip | <text> | Tooltip text; see Tooltip. |
Accessibility
- It is icon-only, so it needs an
aria-labelthat names the action ("New message", not "Plus"). - Being fixed, it sits on top of whatever scrolls under it. Leave room at the end of the page so the last content isn't covered.
- It comes wherever it is in the source for focus order, not where it appears. Place it near the content it acts on.
| Key | Effect |
|---|---|
| Enter / Space | Activates the button. |