Material Design 3Actions

Floating Action Button (FAB)

The FAB represents the most important action on a screen. It appears in front of all screen content and is typically used to promote a single, primary action.

Overview

Floating Action Buttons (FABs) are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point. Material Design 3 FABs come in three sizes and four color variants.

Live Preview

Small

Regular

Large

Color Variants

Primary

Secondary

Tertiary

Surface

Extended FAB

Brand Properties

The following table shows FAB properties with Material Design 3 defaults and brand-specific values.

Property	Type	Material Default	HoB Value	TAE Value
Container Size (Small)	Dimension	`40px`	`40px`	`40px`
Container Size (Regular)	Dimension	`56px`	`56px`	`56px`
Container Size (Large)	Dimension	`96px`	`96px`	`96px`
Corner Radius (Small)	Dimension	`12px`	`12px`	`12px`
Corner Radius (Regular)	Dimension	`16px`	`12px`	`12px`
Corner Radius (Large)	Dimension	`28px`	`12px`	`12px`
Icon Size (Small)	Dimension	`24px`	`20px`	`20px`
Icon Size (Regular)	Dimension	`24px`	`24px`	`24px`
Icon Size (Large)	Dimension	`36px`	`36px`	`36px`
Container Color	Color	`#6750A4`	`#038012`	`#1A5129`
Icon Color	Color	`#FFFFFF`	`#FFFFFF`	`#FFFFFF`
Shadow Elevation	Elevation	`Level 3 (6dp)`	`Level 3 (6dp)`	`Level 3 (6dp)`
Hover Elevation	Elevation	`Level 4 (8dp)`	`Level 4 (8dp)`	`Level 4 (8dp)`
Extended FAB Height	Dimension	`56px`	`56px`	`56px`
Extended FAB Padding	Dimension	`16px`	`16px 32px`	`16px 20px`
Label Font	Font Family	`Roboto`	`Open Sans`	`Open Sans`
Label Size	Font Size	`14px`	`14px`	`16px`
Label Weight	Font Weight	`500`	`600`	`700`

Positioning

Content Area

16dp from edge

Accessibility

Ensure FAB has a minimum touch target of 48x48dp
Provide meaningful aria-label describing the action
FAB should be focusable and operable via keyboard
Maintain 3:1 contrast ratio for the icon against container
Extended FAB labels should clearly describe the action

Do's and Don'ts

Do

Use FAB for the primary action on a screen
Position FAB consistently (typically bottom-right)
Use recognizable icons for common actions
Animate FAB when scrolling to maintain context

Don't

Use multiple FABs on the same screen
Use FAB for minor or destructive actions
Position FAB over important content
Hide FAB in complex navigation patterns

Related Components

FAB Menu - FAB with expandable menu
Material Button - Standard button variants
Icon Button - Compact icon-only buttons
CRAFT Button Element - Base button element