FloatingActionButton

Floating action buttons represent the primary action on a screen. This component implements the M3 Expressive FAB sizes and color styles; label content turns it into an extended FAB.

Action components convert title into the library tooltip. See Action Tooltips for the shared behavior and accessible-name fallback.

Anatomy

Highlight

Element	Part	Selector
<component>	root	[data-scope="floating-action-button"][data-part="root"] left_clickLMBCopy
<span>	iconconditional	[data-scope="floating-action-button"][data-part="icon"] left_clickLMBCopy
<span>	labelconditional	[data-scope="floating-action-button"][data-part="label"] left_clickLMBCopy

Props

Name	Description	Default	Control
colorOptional	The color style of the FAB. primary-containerprimarysecondarytertiarysecondary-containertertiary-container	"primary-container"	checkprimary-containerprimarysecondarytertiarysecondary-containertertiary-container
sizeOptional	The size of the FAB. largemediumregular	"regular"	largemediumcheckregular
hrefOptional	The href attribute. If provided, the FAB will be rendered as an anchor element. string | undefined	undefined
iconOptional	Name of the icon. string | undefined	undefined
disabledOptional	Whether the FAB is disabled. boolean | undefined	false

Events0

No events documented.

Slots2

Name	Parameters	Description
icon	-	Slot for icon content. Will not be used if `icon` prop is set.
default	-	Label content. When present, the FAB uses the extended layout.

Styling23

Preview

Token	Description
--md-fab-container-colorColor Fallbackvar(--md-sys-color-primary-container)	Controls container color.
--md-fab-icon-colorColor Fallbackvar(--md-sys-color-on-primary-container)	Controls icon color.
--md-fab-label-text-colorColor Fallbackvar(--md-sys-color-on-primary-container)	Controls label text color.
--md-fab-state-layer-colorColor Fallbackvar(--md-sys-color-on-primary-container)	Controls state layer color.
--md-fab-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls container elevation.
--md-fab-hovered-container-elevationElevation Fallbackvar(--md-sys-elevation-level4)	Controls hovered container elevation.
--md-fab-focused-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls focused container elevation.
--md-fab-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls pressed container elevation.
--md-fab-container-heightSize Fallback56px, 80px, or 96px depending on size	Controls container height.
--md-fab-container-widthSize Fallback56px, 80px, or 96px depending on size	Controls icon-only container width.
--md-fab-container-shapeShape Fallbackvar(--md-shape-fab-regular), var(--md-shape-fab-medium), or var(--md-shape-fab-large) depending on size	Controls container shape.
--md-fab-icon-sizeSize Fallback24px, 28px, or 36px depending on size	Controls icon size.
--md-fab-leading-spaceSpacing Fallback16px, 26px, or 28px depending on size	Controls extended FAB leading space.
--md-fab-icon-label-spaceSpacing Fallback8px, 12px, or 16px depending on size	Controls space between icon and label.
--md-fab-trailing-spaceSpacing Fallback16px, 26px, or 28px depending on size	Controls extended FAB trailing space.
--md-fab-focus-indicator-colorFocus Fallbackvar(--md-sys-color-primary)	Controls focus indicator color.
--md-fab-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls focus indicator thickness.
--md-fab-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls focus indicator outline offset.
--md-fab-disabled-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled container color.
--md-fab-disabled-container-opacityDisabled Fallback0.1	Controls disabled container opacity.
--md-fab-disabled-container-elevationDisabled Fallbackvar(--md-sys-elevation-level0)	Controls disabled container elevation.
--md-fab-disabled-content-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled icon and label color.
--md-fab-disabled-content-opacityDisabled Fallback0.38	Controls disabled icon and label opacity.

Examples

Default

Extended

Sizes

Colors

Disabled

open_in_newDisabled link

Tooltip

title is converted into the library tooltip instead of rendering a native HTML tooltip. It is also used as the fallback aria-label when no explicit accessible name is provided.