toc

Floating action button (FAB)

A FAB represents the most important action on a screen, and an extended FAB adds a text label.

edit

<md-gb-fab aria-label="Compose">
  <md-gb-icon>edit</md-gb-icon>
</md-gb-fab>

Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-fab.json (setup)

Usage guidelines

Link to “Usage guidelines”

One main action. Use a FAB for the most important action on a screen. It floats in front of other content.
Pick a size. Choose by visual hierarchy: the default FAB, a medium FAB (most recommended) or a large FAB.
Add a label for emphasis. An extended FAB shows a text label next to its icon. It can collapse while a page scrolls.
Place it consistently. A FAB can sit at the start, center or end, above a navigation bar or nested in it.

Anatomy

Link to “Anatomy”

A FAB holds an icon in its default slot. Set label to make it an extended FAB.

<md-gb-fab aria-label="Share">
  <md-gb-icon>share</md-gb-icon>
</md-gb-fab>

Examples

Link to “Examples”

Extended

Link to “Extended”

Set label for an extended FAB. The label is its accessible name.

edit

<md-gb-fab label="Compose">
  <md-gb-icon>edit</md-gb-icon>
</md-gb-fab>

Without an icon

Link to “Without an icon”

An extended FAB is the only FAB that can leave out its icon.

<md-gb-fab label="Reroute"></md-gb-fab>

Colors

Link to “Colors”

Set color to primary, primary-container (default), secondary, secondary-container, tertiary or tertiary-container.

add

<md-gb-fab color="primary-container" aria-label="Add">
  <md-gb-icon>add</md-gb-icon>
</md-gb-fab>
<md-gb-fab color="secondary-container" aria-label="Add">
  <md-gb-icon>add</md-gb-icon>
</md-gb-fab>
<md-gb-fab color="tertiary-container" aria-label="Add">
  <md-gb-icon>add</md-gb-icon>
</md-gb-fab>

Sizes

Link to “Sizes”

Set size to md or lg. The default is the standard FAB. sm is a 40dp FAB that the spec no longer recommends.

add

<md-gb-fab aria-label="Add">
  <md-gb-icon>add</md-gb-icon>
</md-gb-fab>
<md-gb-fab size="md" aria-label="Add">
  <md-gb-icon>add</md-gb-icon>
</md-gb-fab>
<md-gb-fab size="lg" aria-label="Add">
  <md-gb-icon>add</md-gb-icon>
</md-gb-fab>

Collapsed

Link to “Collapsed”

Set expanded="false" to collapse an extended FAB to an icon-only FAB. Set the expanded property to change it later.

edit

<md-gb-fab label="Compose" expanded="false">
  <md-gb-icon>edit</md-gb-icon>
</md-gb-fab>

Collapse on scroll

Link to “Collapse on scroll”

Set scroll-target to the id of a scrolling container, or window. The FAB collapses while it scrolls down and expands while it scrolls up. A cancelable toggle event fires first.

Message 1

Message 2

Message 3

Message 4

Message 5

Message 6

Message 7

Message 8

edit

HTML

CSS

<div id="content">
  <p>Message 1</p>
  <p>Message 2</p>
  <p>Message 3</p>
  <p>Message 4</p>
  <p>Message 5</p>
  <p>Message 6</p>
  <p>Message 7</p>
  <p>Message 8</p>
  <md-gb-fab label="Compose" scroll-target="content">
    <md-gb-icon>edit</md-gb-icon>
  </md-gb-fab>
</div>

#content {
  inline-size: 100%;
  block-size: 240px;
  overflow: auto;
}

md-gb-fab {
  position: sticky;
  inset-block-end: 16px;
}

Accessibility

Link to “Accessibility”

An icon-only FAB needs an aria-label that describes its action, such as "Compose a new message".
An extended FAB uses its label as its name, also while collapsed. Add aria-label only for more context.
An icon-only FAB shows a tooltip on hover and focus. Set tooltip="false" to turn it off.
A FAB fixed over scrolling content shouldn't hide focused elements. Register it with setupScrollPadding() from appbar/scroll-padding.js.
Tab focuses the FAB, and Enter or Space activates it.

Compatibility

Link to “Compatibility”

Material Design 3Spec checked100% tokens

134 of 377 buildable spec units are tested, 40 are excluded with a written reason and 0 are uncovered (the target is 0). 65 of 65 token declarations match the spec (100%).

floating-action-button on m3.material.io (opens in a new tab) extended-fab on m3.material.io (opens in a new tab) How compliance is measured

BaselineWidely availableChrome 124Edge 124Firefox 125Safari 17.4

The component’s own CSS and JavaScript rely only on web platform features that are Baseline widely available: it works in Chrome 124, Edge 124, Firefox 125, Safari 17.4 and later.

Newer features it uses where the browser has them (progressive enhancements):

interpolate-size (opens in a new tab) Limited availability degrades safely where it is missing

Browser support Learn more about Baseline (opens in a new tab)

WAI-ARIAaxe and ARIA 1.3 passButton

Roles the component renders: button (opens in a new tab).

Follows the WAI-ARIA Authoring Practices: Button (opens in a new tab).

5 rendered states run through axe-core and the WAI-ARIA 1.3 role and attribute rules in a real browser, with no known gaps.

WAI-ARIA 1.3 (opens in a new tab) ARIA Authoring Practices (opens in a new tab) Accessibility

Lighthouse97 · 100 · 100 · 100

Performance
Accessibility
Best practices
SEO

Audits under 90:

Elements with visible text labels do not have matching accessible names.
Eliminate render-blocking resources
Minify JavaScript
Enable text compression
Network dependency tree
Render blocking requests

Lighthouse 12.8.2 (desktop, 2026-11-08) on the component alone: its first example on a page of its own, without this site's shell. The modules are the development build (not bundled or minified), so the performance score is indicative.

Open the test page About Lighthouse (opens in a new tab)

API reference

Link to “API reference”

<md-gb-fab>

Link to “<md-gb-fab>”

A Material Design component.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`color`	`color`	`FabColor`	`'primary-container'`
`expanded` Whether the extended FAB shows its label. When `false`, the label collapses and the FAB becomes an icon-only FAB. Set the attribute to `expanded="false"` to collapse it from markup.	`expanded`	`boolean`	`true`
`label` The extended FAB's label. Without one, the FAB is icon-only.	`label`	`string`	`''`
`scrollTarget` Opt-in: the `id` of a scroll container (in the same root), or `window`. The FAB collapses while it scrolls down and expands while it scrolls up.	`scroll-target`	`string`	`''`
`size` The size. With a `label`, `default`, `md` and `lg` are the small, medium and large extended FABs. `sm` is the small (40dp) icon-only FAB, which the spec no longer recommends.	`size`	`FabSize`	`'default'`
`tooltip` Shows a tooltip with the FAB's name (the `label`, else `aria-label`) on hover and keyboard focus. On by default for an icon-only FAB, whose icon has no visible text (floating-action-button.md: on web, a FAB should display a tooltip with its text label); `tooltip="false"` turns it off.	`tooltip`	`boolean`	`true`

Slots

Link to “Slots”

Slot	Description
default	The icon. Text placed here is shown but does not collapse; use `label` for an extended FAB.

CSS parts

Link to “CSS parts”

Part	Description
`::part(fab)`	The FAB's root element.
`::part(label)`	The extended FAB's label.

CSS custom properties

Link to “CSS custom properties”

Property	Description
`--container-color`
`--container-elevation`
`--container-height`
`--container-shape`
`--container-width`
`--icon-color`
`--icon-label-space`
`--icon-size`
`--label-text`
`--label-text-axes`
`--label-text-color`
`--label-text-tracking`
`--leading-space`
`--trailing-space`

Floating action button (FAB)

Usage guidelines

Anatomy

Examples

Extended

Without an icon

Colors

Sizes

Collapsed

Collapse on scroll

Accessibility

Compatibility

API reference

<md-gb-fab>

Properties

Slots

CSS parts

CSS custom properties

Download & copy

Download

Copy

Customize theme