Floating action button

A floating action button puts the one most important action on a screen within reach, above the content. Add a label and it becomes an extended button that names its action in words, so nobody has to decode an icon. Each button below wears its own theme; watch one badge come and go, and one button shrink away and return.

Compose

Inbox

New list

Reference docs⁠

Blazor

React

Web

Overview

Examples

API

Styling

Accessibility

Choosing a button⁠

Six components share the button's form. Each suits a different job:

Button: an action with a name, such as Save, Send invitation, or Delete project.
Icon button: an action shown by a relevant icon only, with no label, such as close, share, or more, where space is tight.
Floating action button: the one most important action on a screen, floating above the content.
FAB menu: a floating action button that opens a short set of related actions, such as new message, new call, or new meeting.
Toggle button: a labeled setting that stays on until it is switched off, such as bold or mute.
Toggle icon button: the same two-state setting, shown by an icon only, such as bookmark or favorite.

Two jobs belong elsewhere. Words that take the reader somewhere are a link in the text, and a choice among options is a set of chips, radio buttons, or a select.

Used together⁠

A FAB menu usually opens from a floating action button:

FAB menu: the short set of related actions it opens.
Floating action button: the usual anchor that opens it.

Choosing a variant⁠

Six variants set the button's color. The three solid ones draw the most attention, and the three container ones sit more quietly:

Primary: the strongest pull, for a screen where the action must stand out from everything around it, such as Compose in a mail app.
Secondary: a solid fill in the secondary accent, for when the primary accent is already busy nearby, such as Share on a media page.
Tertiary: a solid fill in the tertiary accent, for a third voice on a crowded screen, such as Record beside a player.
Primary container: the default, a softer fill in the primary accent that suits most screens, such as New note.
Secondary container: the same softness in the secondary accent, such as Add to list.
Tertiary container: the same softness in the tertiary accent, such as Add a photo.

Built in⁠

A label in the default slot turns the button into an extended one, with its own typography at each size.
A badge needs no separate element: badge-value sets its text, badge-dot shows a dot, and badge-concealed hides it and brings it back unchanged.
tooltip-value adds a tooltip that a screen reader reads as the button's description.
concealed shrinks and fades the button away, takes it out of the Tab order, and stops it taking clicks until you reveal it.
label-concealed folds an extended button down to its icon, then restores the label.
The touch area is never smaller than a fingertip: 48 by 48 pixels, whatever the size.

Using floating action buttons well⁠

Keep one floating action button on a screen, for the action people reach for most, in the bottom-end corner.
Keep the default small size unless the layout calls for a medium or large button.
Conceal the button with concealed when content scrolls under it, so it does not cover what people are reading.
Add a label when an icon alone could be misread, and give an icon-only button an aria-label.
Choose a FAB menu when the main action is a short set of related actions, and a button when it is one among several.

These rules follow Material 3 Expressive's guidance for floating action buttons, on material.io.

Variants⁠

variant picks the color from six values. Omit it and the button uses primary-container. Choosing a variant says when each one suits a screen.

Size⁠

size takes small (56 pixels, the default), medium (80 pixels), or large (96 pixels). An extended button keeps its label's typography at every size.

touch-target sets how the touch area sits in the layout. Omit it and the button takes the value from your style configuration, which is overflow unless you have changed it. With wrapper the touch target sets the space the button occupies, and with none it shrinks to the painted size.

Icons and labels⁠

icon-name takes a Material Symbols name. For any other icon, put it in the icon slot; the slot wins when both are set, and the button logs a warning. Default slot content is the label.

flip-icon-in-rtl mirrors an icon-name icon on a right-to-left page, which suits a direction such as reply. An icon in the icon slot is never mirrored. The demo below sets the direction to right-to-left, so the switch shows the flip.

Badges⁠

badge-value sets the badge's text, such as an unread count. badge-dot shows a small dot instead, and badge-value is then ignored. badge-concealed hides the badge and keeps its settings, so clearing it shows the same badge again.

Tooltips⁠

tooltip-value sets the tooltip's text. Because it is only a description, an icon-only button still needs an aria-label.

tooltip-position sets where the tooltip sits relative to the button, and has no effect without tooltip-value. Omit it and the tooltip takes its position from your style configuration, which is end-center unless you have changed it.

In the screen corner⁠

The component does not position itself, so give it a position in your layout, as the demo does for the bottom-end corner. The inline-end offset follows the page direction.

concealed shrinks and fades the button away when content covers it, and stops it taking clicks until revealed. label-concealed folds the label away; a button with no icon ignores it.

Properties⁠

Property	Attribute	Type	Description
`badgeConcealed`	`badge-concealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`badge-dot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`badge-value`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`concealed`	`concealed`	`boolean`default `false`	Conceals the floating action button (FAB). A concealed FAB is hidden from assistive technology and cannot be focused or activated. Concealing and revealing animate, and the animation also runs when the user prefers reduced motion. See In the screen corner.
`flipIconInRtl`	`flip-icon-in-rtl`	`boolean`default `false`	Flips the icon supplied by the `icon-name` property when the text direction is right to left. See Icons and labels.
`iconName`	`icon-name`	`string`	A Material Symbols icon name. An alternative to the `icon` slot. If both are provided, the `icon` slot takes precedence, and a warning is logged. See Icons and labels.
`labelConcealed`	`label-concealed`	`boolean`default `false`	Conceals the label, leaving an icon-only FAB. It has no effect on a FAB without an icon, which keeps its label. Concealing and revealing animate. See In the screen corner.
`size`	`sizelarge`, `medium`, `small`	`FABSizeFABSize.Large`, `.Medium`, `.Small`default `FABSize.Small`	Sets how large the FAB is. An extended FAB, one with a label, is available in every size. See Size.
`tooltipPosition`	`tooltip-positionstart-start`, `start-center`, `start-end`, `center-start`, `center-end`, `end-start`, `end-center`, `end-end`	`TooltipPositionTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`tooltip-value`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`touch-targetnone`, `overflow`, `wrapper`	`TouchTargetTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`variantprimary`, `primary-container`, `secondary`, `secondary-container`, `tertiary`, `tertiary-container`	`FABVariantFABVariant.Primary`, `.PrimaryContainer`, `.Secondary`, `.SecondaryContainer`, `.Tertiary`, `.TertiaryContainer`default `FABVariant.PrimaryContainer`	Sets the FAB's color scheme. See Variants.

label-concealed has no effect on a button with no icon.

Slots⁠

Slot	Description
(default)	The button’s label content.
`icon`	The icon to display in the button, intended for a `cw-icon` or similarly sized visual content such as an SVG.

Events⁠

Event	Type	Detail	Description
`click`	`MouseEvent`	—	Dispatched when the FAB is clicked. It bubbles, is composed, and is cancelable.

Props⁠

Prop	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`concealed`	`boolean`default `false`	Conceals the floating action button (FAB). A concealed FAB is hidden from assistive technology and cannot be focused or activated. Concealing and revealing animate, and the animation also runs when the user prefers reduced motion. See In the screen corner.
`flipIconInRtl`	`boolean`default `false`	Flips the icon supplied by the `iconName` prop when the text direction is right to left. See Icons and labels.
`iconName`	`string`	A Material Symbols icon name. An alternative to the `slot="icon"` child. If both are provided, the `slot="icon"` child takes precedence, and a warning is logged. See Icons and labels.
`labelConcealed`	`boolean`default `false`	Conceals the label, leaving an icon-only FAB. It has no effect on a FAB without an icon, which keeps its label. Concealing and revealing animate. See In the screen corner.
`size`	`FABSizeTypeFABSize.Large`, `.Medium`, `.Small`default `FABSize.Small`	Sets how large the FAB is. An extended FAB, one with a label, is available in every size. See Size.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`FABVariantTypeFABVariant.Primary`, `.PrimaryContainer`, `.Secondary`, `.SecondaryContainer`, `.Tertiary`, `.TertiaryContainer`default `FABVariant.PrimaryContainer`	Sets the FAB's color scheme. See Variants.

label-concealed has no effect on a button with no icon.

Children⁠

Child	Description
`children`	The button’s label content.
a child with `slot="icon"`	The icon to display in the button, intended for a `CrIcon` or similarly sized visual content such as an SVG.

Events⁠

Prop	Argument	Description
`onClick`	`React.MouseEvent<HTMLElement>`	Dispatched when the FAB is clicked. It bubbles, is composed, and is cancelable.

Parameters⁠

Parameter	Type	Description
`BadgeConcealed`	`bool?`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`BadgeDot`	`bool?`default `false`	Shows the badge as a small dot with no text, whether or not `BadgeValue` is set. See Badges.
`BadgeValue`	`string?`	The badge's text. While it is empty and `BadgeDot` is not set, no badge renders. Ignored if `BadgeDot` is set. See Badges.
`Concealed`	`bool?`default `false`	Conceals the floating action button (FAB). A concealed FAB is hidden from assistive technology and cannot be focused or activated. Concealing and revealing animate, and the animation also runs when the user prefers reduced motion. See In the screen corner.
`FlipIconInRtl`	`bool?`default `false`	Flips the icon supplied by the `IconName` parameter when the text direction is right to left. See Icons and labels.
`IconName`	`string?`	A Material Symbols icon name. An alternative to the `Icon` render fragment. If both are provided, the `Icon` render fragment takes precedence, and a warning is logged. See Icons and labels.
`LabelConcealed`	`bool?`default `false`	Conceals the label, leaving an icon-only FAB. It has no effect on a FAB without an icon, which keeps its label. Concealing and revealing animate. See In the screen corner.
`Size`	`FABSize?FABSize.Large`, `.Medium`, `.Small`default `FABSize.Small`	Sets how large the FAB is. An extended FAB, one with a label, is available in every size. See Size.
`TooltipPosition`	`TooltipPosition?TooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `TooltipValue`. See Tooltips.
`TooltipValue`	`string?`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`TouchTarget`	`TouchTarget?TouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`Variant`	`FABVariant?FABVariant.Primary`, `.PrimaryContainer`, `.Secondary`, `.SecondaryContainer`, `.Tertiary`, `.TertiaryContainer`default `FABVariant.PrimaryContainer`	Sets the FAB's color scheme. See Variants.

label-concealed has no effect on a button with no icon.

Render fragments⁠

Once you write Icon or any other fragment as a child element, the main content must go in an explicit <ChildContent> too; markup beside <Icon> is a compile error. Here ChildContent is: The button’s label content.

<CbFab>
    <Icon><CbIcon>favorite</CbIcon></Icon>
    <ChildContent>Main content</ChildContent>
</CbFab>

content_copy

Parameter	Type	Description
`ChildContent`	`RenderFragment?`	The button’s label content.
`Icon`	`RenderFragment?`	The icon to display in the button, intended for a `CbIcon` or similarly sized visual content such as an SVG.

Event callbacks⁠

Parameter	Type	Description
`OnClick`	`EventCallback<MouseEventArgs>`	Dispatched when the FAB is clicked. It bubbles, is composed, and is cancelable.

Inputs⁠

Input	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`concealed`	`boolean`default `false`	Conceals the floating action button (FAB). A concealed FAB is hidden from assistive technology and cannot be focused or activated. Concealing and revealing animate, and the animation also runs when the user prefers reduced motion. See In the screen corner.
`flipIconInRtl`	`boolean`default `false`	Flips the icon supplied by the `iconName` input when the text direction is right to left. See Icons and labels.
`iconName`	`string`	A Material Symbols icon name. An alternative to the `icon` slot. If both are provided, the `icon` slot takes precedence, and a warning is logged. See Icons and labels.
`labelConcealed`	`boolean`default `false`	Conceals the label, leaving an icon-only FAB. It has no effect on a FAB without an icon, which keeps its label. Concealing and revealing animate. See In the screen corner.
`size`	`FABSizeTypeFABSize.Large`, `.Medium`, `.Small`default `FABSize.Small`	Sets how large the FAB is. An extended FAB, one with a label, is available in every size. See Size.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`FABVariantTypeFABVariant.Primary`, `.PrimaryContainer`, `.Secondary`, `.SecondaryContainer`, `.Tertiary`, `.TertiaryContainer`default `FABVariant.PrimaryContainer`	Sets the FAB's color scheme. See Variants.

label-concealed has no effect on a button with no icon.

Content projection⁠

Content	Description
content with no `slot`	The button’s label content.
an element with `slot="icon"`	The icon to display in the button, intended for a `CaIcon` or similarly sized visual content such as an SVG.

Outputs⁠

Output	Event	Description
`cwClick`	`MouseEvent`	Dispatched when the FAB is clicked. It bubbles, is composed, and is cancelable.

Props⁠

Prop	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`concealed`	`boolean`default `false`	Conceals the floating action button (FAB). A concealed FAB is hidden from assistive technology and cannot be focused or activated. Concealing and revealing animate, and the animation also runs when the user prefers reduced motion. See In the screen corner.
`flipIconInRtl`	`boolean`default `false`	Flips the icon supplied by the `iconName` prop when the text direction is right to left. See Icons and labels.
`iconName`	`string`	A Material Symbols icon name. An alternative to the `icon` slot. If both are provided, the `icon` slot takes precedence, and a warning is logged. See Icons and labels.
`labelConcealed`	`boolean`default `false`	Conceals the label, leaving an icon-only FAB. It has no effect on a FAB without an icon, which keeps its label. Concealing and revealing animate. See In the screen corner.
`size`	`FABSizeTypeFABSize.Large`, `.Medium`, `.Small`default `FABSize.Small`	Sets how large the FAB is. An extended FAB, one with a label, is available in every size. See Size.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`FABVariantTypeFABVariant.Primary`, `.PrimaryContainer`, `.Secondary`, `.SecondaryContainer`, `.Tertiary`, `.TertiaryContainer`default `FABVariant.PrimaryContainer`	Sets the FAB's color scheme. See Variants.

label-concealed has no effect on a button with no icon.

Slots⁠

Slot	Description
`default`	The button’s label content.
`icon`	The icon to display in the button, intended for a `CvIcon` or similarly sized visual content such as an SVG.

Events⁠

Event	Type	Description
`click`	`MouseEvent`	Dispatched when the FAB is clicked. It bubbles, is composed, and is cancelable.

Props⁠

Prop	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`concealed`	`boolean`default `false`	Conceals the floating action button (FAB). A concealed FAB is hidden from assistive technology and cannot be focused or activated. Concealing and revealing animate, and the animation also runs when the user prefers reduced motion. See In the screen corner.
`flipIconInRtl`	`boolean`default `false`	Flips the icon supplied by the `iconName` prop when the text direction is right to left. See Icons and labels.
`iconName`	`string`	A Material Symbols icon name. An alternative to the `iconSnippet` snippet. If both are provided, the `iconSnippet` snippet takes precedence, and a warning is logged. See Icons and labels.
`labelConcealed`	`boolean`default `false`	Conceals the label, leaving an icon-only FAB. It has no effect on a FAB without an icon, which keeps its label. Concealing and revealing animate. See In the screen corner.
`size`	`FABSizeTypeFABSize.Large`, `.Medium`, `.Small`default `FABSize.Small`	Sets how large the FAB is. An extended FAB, one with a label, is available in every size. See Size.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`FABVariantTypeFABVariant.Primary`, `.PrimaryContainer`, `.Secondary`, `.SecondaryContainer`, `.Tertiary`, `.TertiaryContainer`default `FABVariant.PrimaryContainer`	Sets the FAB's color scheme. See Variants.

label-concealed has no effect on a button with no icon.

Snippets⁠

Snippet	Description
`children`	The button’s label content.
`iconSnippet`	The icon to display in the button, intended for a `CsIcon` or similarly sized visual content such as an SVG.

Events⁠

Prop	Type	Description
`onClick`	`MouseEvent`	Dispatched when the FAB is clicked. It bubbles, is composed, and is cancelable.

Each attribute value has its own tokens; a cell shows its token's value, and selecting the cell shows the token's fallback path, with each name and value ready to copy. For example, the primary-container column's container-color row is --ct-fab-primary-container-container-color, which defaults to --ct-sys-color-primary-container.

Variant⁠

Name	`primary`	`primary-container`	`secondary`	`secondary-container`	`tertiary`	`tertiary-container`
`container-color`	`--ct-sys-color-primary` `--ct-fab-primary-container-color`	`--ct-sys-color-primary-container` `--ct-fab-primary-container-container-color`	`--ct-sys-color-secondary` `--ct-fab-secondary-container-color`	`--ct-sys-color-secondary-container` `--ct-fab-secondary-container-container-color`	`--ct-sys-color-tertiary` `--ct-fab-tertiary-container-color`	`--ct-sys-color-tertiary-container` `--ct-fab-tertiary-container-container-color`
`icon-color`	`--ct-sys-color-on-primary` `--ct-fab-primary-icon-color`	`--ct-sys-color-on-primary-container` `--ct-fab-primary-container-icon-color`	`--ct-sys-color-on-secondary` `--ct-fab-secondary-icon-color`	`--ct-sys-color-on-secondary-container` `--ct-fab-secondary-container-icon-color`	`--ct-sys-color-on-tertiary` `--ct-fab-tertiary-icon-color`	`--ct-sys-color-on-tertiary-container` `--ct-fab-tertiary-container-icon-color`

Size⁠

Name	`small`	`medium`	`large`
`container-height`	`56px` `--ct-fab-container-height`	`80px` `--ct-fab-medium-container-height`	`96px` `--ct-fab-large-container-height`
`container-shape`	—	`--ct-sys-corner-radius-large-increased` `--ct-fab-medium-container-shape`	`--ct-sys-corner-radius-extra-large` `--ct-fab-large-container-shape`
`container-width`	`56px` `--ct-fab-container-width`	`80px` `--ct-fab-medium-container-width`	`96px` `--ct-fab-large-container-width`
`corner-end-end-radius`	same as `corner-radius` `--ct-fab-corner-end-end-radius`	same as `corner-radius` `--ct-fab-medium-corner-end-end-radius`	same as `corner-radius` `--ct-fab-large-corner-end-end-radius`
`corner-end-start-radius`	same as `corner-radius` `--ct-fab-corner-end-start-radius`	same as `corner-radius` `--ct-fab-medium-corner-end-start-radius`	same as `corner-radius` `--ct-fab-large-corner-end-start-radius`
`corner-radius`	same as `--ct-fab-corner-size` `--ct-fab-corner-radius`	same as `container-shape` `--ct-fab-medium-corner-radius`	same as `container-shape` `--ct-fab-large-corner-radius`
`corner-start-end-radius`	same as `corner-radius` `--ct-fab-corner-start-end-radius`	same as `corner-radius` `--ct-fab-medium-corner-start-end-radius`	same as `corner-radius` `--ct-fab-large-corner-start-end-radius`
`corner-start-start-radius`	same as `corner-radius` `--ct-fab-corner-start-start-radius`	same as `corner-radius` `--ct-fab-medium-corner-start-start-radius`	same as `corner-radius` `--ct-fab-large-corner-start-start-radius`
`icon-label-space`	`8px` `--ct-fab-small-icon-label-space`	`12px` `--ct-fab-medium-icon-label-space`	`16px` `--ct-fab-large-icon-label-space`
`icon-size`	`24px` `--ct-fab-icon-size`	`28px` `--ct-fab-medium-icon-size`	`36px` `--ct-fab-large-icon-size`
`label-text-font`	`--ct-sys-typescale-title-medium-font` `--ct-fab-small-label-text-font`	`--ct-sys-typescale-title-large-font` `--ct-fab-medium-label-text-font`	`--ct-sys-typescale-headline-small-font` `--ct-fab-large-label-text-font`
`label-text-line-height`	`--ct-sys-typescale-title-medium-line-height` `--ct-fab-small-label-text-line-height`	`--ct-sys-typescale-title-large-line-height` `--ct-fab-medium-label-text-line-height`	`--ct-sys-typescale-headline-small-line-height` `--ct-fab-large-label-text-line-height`
`label-text-size`	`--ct-sys-typescale-title-medium-size` `--ct-fab-small-label-text-size`	`--ct-sys-typescale-title-large-size` `--ct-fab-medium-label-text-size`	`--ct-sys-typescale-headline-small-size` `--ct-fab-large-label-text-size`
`label-text-tracking`	`--ct-sys-typescale-title-medium-tracking` `--ct-fab-small-label-text-tracking`	`--ct-sys-typescale-title-large-tracking` `--ct-fab-medium-label-text-tracking`	`--ct-sys-typescale-headline-small-tracking` `--ct-fab-large-label-text-tracking`
`label-text-weight`	`--ct-sys-typescale-title-medium-weight` `--ct-fab-small-label-text-weight`	`--ct-sys-typescale-title-large-weight` `--ct-fab-medium-label-text-weight`	`--ct-sys-typescale-headline-small-weight` `--ct-fab-large-label-text-weight`
`leading-space`	`16px` `--ct-fab-small-leading-space`	`26px` `--ct-fab-medium-leading-space`	`28px` `--ct-fab-large-leading-space`
`trailing-space`	`16px` `--ct-fab-small-trailing-space`	`26px` `--ct-fab-medium-trailing-space`	`28px` `--ct-fab-large-trailing-space`

Other tokens⁠

Token	Value
`--ct-fab-container-elevation`	`--ct-sys-elevation-level3` `--ct-fab-container-elevation`
`--ct-fab-corner-size`	`--ct-sys-corner-radius-large` `--ct-fab-corner-size`
`--ct-fab-extended-small-container-shape`	`--ct-sys-corner-radius-large` `--ct-fab-extended-small-container-shape`
`--ct-fab-extended-small-corner-end-end-radius`	same as `--ct-fab-extended-small-corner-radius` `--ct-fab-extended-small-corner-end-end-radius`
`--ct-fab-extended-small-corner-end-start-radius`	same as `--ct-fab-extended-small-corner-radius` `--ct-fab-extended-small-corner-end-start-radius`
`--ct-fab-extended-small-corner-radius`	same as `--ct-fab-extended-small-container-shape` `--ct-fab-extended-small-corner-radius`
`--ct-fab-extended-small-corner-start-end-radius`	same as `--ct-fab-extended-small-corner-radius` `--ct-fab-extended-small-corner-start-end-radius`
`--ct-fab-extended-small-corner-start-start-radius`	same as `--ct-fab-extended-small-corner-radius` `--ct-fab-extended-small-corner-start-start-radius`
`--ct-fab-focused-container-elevation`	`--ct-sys-elevation-level3` `--ct-fab-focused-container-elevation`
`--ct-fab-hovered-container-elevation`	`--ct-sys-elevation-level4` `--ct-fab-hovered-container-elevation`
`--ct-fab-hovered-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-fab-hovered-state-layer-opacity`
`--ct-fab-pressed-container-elevation`	`--ct-sys-elevation-level3` `--ct-fab-pressed-container-elevation`
`--ct-fab-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-fab-pressed-state-layer-opacity`
`--ct-fab-scale-anchor`	`100% 100%` `--ct-fab-scale-anchor`

Names and states⁠

A floating action button follows the WAI-ARIA Authoring Practices: Button pattern.

The accessible name comes from the label in the default slot. An icon-only button has no name until you set aria-label, because the icon is hidden from assistive technology.
Only aria-label takes effect. Any other aria-* attribute has no effect.
The tooltip text is the focused control's description: a screen reader announces it after the name, unless it only repeats the name, which is skipped. It never names the button.
The badge is not wired into the name or description. Put what it means in the aria-label, such as "Inbox, 12 unread".
A floating action button has no disabled state. A concealed button is hidden from assistive technology, out of the Tab order, and takes no pointer events.

Keyboard and focus⁠

Key	Action
Tab	Moves focus to the button
Enter	Activates it
Space	Activates it
Escape	Hides the tooltip, when the button has one

Focus shows a ring on keyboard focus, and hides it on pointer down.
A concealed button is out of the Tab order, so reveal it before you move focus to it.

Pointer and touch⁠

The touch target is centered on the button and measures at least 48 by 48 pixels, twice WCAG 2.5.8's 24 by 24 minimum.
touch-target changes how the target relates to layout. Even none leaves a target of at least 56 pixels, the smallest size. Size shows each value.

Display settings⁠

Forced colors: the button draws its own 1 pixel ButtonText border, and the focus ring sits at a wider offset.
Reduced motion: the press ripple and the focus ring's animation are skipped. Concealing and revealing happen at once, and so does the label's width change under label-concealed.
Right to left: flip-icon-in-rtl mirrors an icon-name icon. An icon in the icon slot is never mirrored.

Standards⁠

With its defaults, a floating action button meets seven WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.1.2 No Keyboard Trap (A)
2.5.2 Pointer Cancellation (A)
2.4.7 Focus Visible (AA)
2.5.8 Target Size (Minimum) (AA)
1.3.1 Info and Relationships (A)
1.4.13 Content on Hover or Focus (AA)

Four more depend on how you use it:

4.1.2 Name, Role, Value (A): give an icon-only button an aria-label.
2.5.3 Label in Name (A): keep the visible label's words in any aria-label.
2.4.6 Headings and Labels (AA): write a label that says what the button does.
1.1.1 Non-text Content (A): give a slotted image an alt, or mark a decorative one.

Floating action button

Reference docs⁠link

Choosing a button⁠link

Used together⁠link

Choosing a variant⁠link

Built in⁠link

Using floating action buttons well⁠link

Variants⁠link

Size⁠link

Icons and labels⁠link

Badges⁠link

Tooltips⁠link

In the screen corner⁠link

Properties⁠link

Slots⁠link

Events⁠link

Props⁠link

Children⁠link

Events⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Props⁠link

Slots⁠link

Events⁠link

Props⁠link

Snippets⁠link

Events⁠link

Variant⁠link

Size⁠link

Other tokens⁠link

Names and states⁠link

Keyboard and focus⁠link

Pointer and touch⁠link

Display settings⁠link

Standards⁠link

Reference docs⁠

Choosing a button⁠

Used together⁠

Choosing a variant⁠

Built in⁠

Using floating action buttons well⁠

Variants⁠

Size⁠

Icons and labels⁠

Badges⁠

Tooltips⁠

In the screen corner⁠

Properties⁠

Slots⁠

Events⁠

Props⁠

Children⁠

Events⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Props⁠

Slots⁠

Events⁠

Props⁠

Snippets⁠

Events⁠

Variant⁠

Size⁠

Other tokens⁠

Names and states⁠

Keyboard and focus⁠

Pointer and touch⁠

Display settings⁠

Standards⁠