FAB

Overview

A FAB (floating action button) is a prominent, elevated button that represents the primary, most common positive action on a screen — compose, create, add. It floats above the content with a resting shadow and lifts further on hover. Use at most one FAB per screen, and avoid it for low-emphasis or destructive actions like delete or archive.

It shares the Button's geometry, state-layer model and focus ring, but always floats and uses four design-system color styles from the Figma spec — primary-container (default), secondary-container, primary and secondary — plus elevated and glass to stay consistent with the rest of the button family.

For an icon-only FAB, pass an aria-label describing the action.

Examples

Variants

primary-container is the default low-saturation style; primary/secondary are the high-emphasis filled styles. glass is translucent and is meant to sit over imagery or a colored backdrop.

Extended

Add a text label next to the icon for an extended FAB — useful when the action benefits from a word or two of context. The height stays the same; the button just grows wider.

Sizes

Three sizes scale the icon, padding and corner radius together — sm (56px, default), md (80px) and lg (96px).

Radius

The default rounded shape uses a per-size corner radius (16/20/28px); full makes the FAB a circle (or a pill, when extended).

Installation

API Reference

Accessibility

• Renders a native <button>, so keyboard activation and focus handling come for free.
• Provide an aria-label for icon-only FABs — there is no visible text to name the control.
• A visible focus ring (3px accent with a 2px offset) is provided via focus-visible.
• loading sets aria-busy and disables interaction while work is in flight.
• Avoid disabling a FAB — Material guidance reserves the FAB for an always-available primary action. (disabled still works for the rare case that needs it.)