Fab

Floating action buttons help people take primary actions.

Props

React props
NameTypeRequiredDefaultDescription
labelstringYes—Accessible name and extended visible text.
iconIconYes—Icon representing the primary action.
variantFabVariantNo'primary'Visual color treatment.
sizeFabSizeNo'small'Visual size.
tooltipstring | falseNo—Visual tooltip text, shown while the fab is compact. Defaults to `label`; set to `false` to hide it. An extended fab never shows one, its label already being visible.
extendedbooleanNofalseDisplays the visible text label beside the icon.
disabledbooleanNofalseDisables interaction.
classNamestring | ClassNameComponent<FabInterface> | Partial<Record<"label" | "icon" | "stateLayer" | "fab" | "touchTarget", string>>No—Classes or state-aware element classes applied through the shared style contract.