Fab

Floating action buttons help people take primary actions.

Props

React props
NameTypeRequiredDefaultDescription
labelstringYesAccessible name and extended visible text.
iconIconYesIcon representing the primary action.
variantFabVariantNo'primary'Visual color treatment.
sizeFabSizeNo'small'Visual size.
tooltipstring | falseNoVisual 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" | "stateLayer" | "fab" | "touchTarget" | "icon", string>>NoClasses or state-aware element classes applied through the shared style contract.