Skip to main content

Fab

Imports

import {Fab} from 'material-expressive-react';
import {Fab} from 'material-expressive-react/fab';

Props

PropTypeDefaultRequiredDescription
labelstringNoThe text to display on the FAB. When set, the FAB becomes extended.
loweredbooleanNoLowers the FAB's elevation.
sizeenumNoThe size of the FAB. Extended FABs do not have different sizes.
touchTargetenumNoControls the optional 48x48 touch target wrapper.

Use touchTarget="none" with size="small" to reduce the touch target.
variantenumNoThe FAB color variant to render.

Events

This component does not explicitly re-emit DOM events via wrapper props.

Slots

Material Web components frequently use named slots. In React, you can pass slot="..." on children (e.g. <Icon slot="icon" />).

If you need to slot a child component that does not accept a slot prop, use the Slotted utility (see Utilities → Slotted).

Examples

See Storybook for live examples and variants.