Inputs

FAB

Floating action button for the single most frequent action on a screen. Glass overlay and elevated sheen.

Examples

Large 56 · Medium 48 · Small 40 · Extended

Rendered states (visual reference; the live example above is the accessible one)
	Default	Hover	Focus visible	Pressed	Disabled
Large

FAB anatomy
#	Part	Description	Presence
1	Container	Circle or pill, 56 / 48 / 40px	Required
2	Icon	Leading glyph, decorative	Required
3	Label	Extended variant only	Optional
4	Shadow	Y 6px, blur 16	Required

Keyboard
Key	Result
`Tab` `Shift+Tab`	Moves focus to and from the control
`Enter`	Activates
`Space`	Activates on key up

Pointer and touch
Trigger	Response
Hover	Overlay at 10% (hover-overlay-opacity); cursor stays default on non-links
Press	Scale to 0.97 in 100ms; released on pointer up
Touch	Target at least 44px, with a halo if the visual is smaller
Scroll	Extended collapses to icon only while scrolling down, expands when scrolling up

role · button

1.4.10Reflow2.4.11Focus Not Obscured2.5.8Target Size (Minimum)4.1.2Name, Role, Value

Requirements
Requirement	How Rig meets it
Name	Icon-only FAB needs aria-label
Position	Never covers content that cannot be scrolled out from under it (WCAG 2.4.11)
Reflow	At 400% zoom it stays reachable without horizontal scrolling

Do and don’t
Do	Don’t
Use for the single most frequent action on the screen	Do not use more than one FAB per screen
Keep 16px from the screen edge	Do not hide the label for actions that are not obvious