Extra

FloatingActionButton

A FormaUI floating action button — "Material 3 with better defaults"; one entry point covers all three Material 3 FAB sizes via size, with a default-on press-scale micro-interaction (shared Modifier.formaPressScale) on both FAB composables.

4 variantsThemed defaults

import dev.formaui.components.fab.FormaFloatingActionButton

import dev.formaui.components.fab.FormaExtendedFloatingActionButton

SmallRegularLargeExtended

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

LIVE PREVIEW

Live preview — ~37 MB development build

Usage

KOTLIN

123456789101112FormaFloatingActionButton(onClick = { /* create */ }) {
    Icon(Icons.Default.Add, contentDescription = "Add")
}
 
// Extended FAB with a label that can collapse on scroll:
var expanded by remember { mutableStateOf(true) }
FormaExtendedFloatingActionButton(
    text = "Compose",
    icon = { Icon(Icons.Default.Add, contentDescription = null) },
    onClick = { /* compose */ },
    expanded = expanded,
)

FormaFloatingActionButton

The screen's primary action, in Small/Regular/Large sizes; corners default to FormaUI's xl tier for a consistent silhouette across sizes.

ParameterTypeDefaultDescription

onClickrequiredType() -> UnitDefaultrequiredDescriptioncalled when the FAB is clicked.

modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the FAB.

sizeTypeFormaFabSizeDefaultFormaFabSize.RegularDescriptionthe FAB's size (defaults to FormaFabSize.Regular).

shapeTypeShape?DefaultnullDescriptionthe FAB's container shape (defaults to FormaFabDefaults.shape).

containerColorTypeColorDefaultFloatingActionButtonDefaults.containerColorDescriptionthe background color of the FAB.

contentColorTypeColorDefaultcontentColorFor(containerColor)Descriptionthe preferred content color, derived from containerColor by default.

interactionSourceTypeMutableInteractionSource?DefaultnullDescriptionthe MutableInteractionSource for observing/emitting interactions. When null, one is remembered internally.

pressedScaleTypeFloatDefaultFormaPressScaleDefaults.PressedScaleDescriptionthe scale factor applied while the FAB is pressed (defaults to a subtle 0.97). Must be greater than 0.

pressAnimationSpecTypeFiniteAnimationSpec<Float>?DefaultFormaPressScaleDefaults.AnimationSpecDescriptionthe animation used for the press-scale's release spring-back (defaults to a responsive spring; the press dip uses FormaPressScaleDefaults.DownAnimationSpec). Pass null to disable the press-scale entirely.

contentrequiredType@Composable () -> UnitDefaultrequiredDescriptionthe FAB's content, typically a single Icon.

FormaExtendedFloatingActionButton

A wider FAB pairing an icon with a text label; set expanded = false to collapse down to just the icon, with the width animating between states.

ParameterTypeDefaultDescription

textrequiredTypeStringDefaultrequiredDescriptionthe FAB's text label.

iconrequiredType@Composable () -> UnitDefaultrequiredDescriptionthe FAB's leading icon.

onClickrequiredType() -> UnitDefaultrequiredDescriptioncalled when the FAB is clicked.

modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the FAB.

expandedTypeBooleanDefaulttrueDescriptionwhether the FAB shows both icon and text (true) or collapses to just icon (false).

shapeTypeShape?DefaultnullDescriptionthe FAB's container shape (defaults to FormaFabDefaults.shape).

containerColorTypeColorDefaultFloatingActionButtonDefaults.containerColorDescriptionthe background color of the FAB.

contentColorTypeColorDefaultcontentColorFor(containerColor)Descriptionthe preferred content color, derived from containerColor by default.

interactionSourceTypeMutableInteractionSource?DefaultnullDescriptionthe MutableInteractionSource for observing/emitting interactions. When null, one is remembered internally.

pressedScaleTypeFloatDefaultFormaPressScaleDefaults.PressedScaleDescriptionthe scale factor applied while the FAB is pressed (defaults to a subtle 0.97). Must be greater than 0.

Supporting API

FormaFabSizeenum: The size of a FormaFloatingActionButton, mirroring Material 3's three FAB sizes: Small, Regular, Large.
FormaFabDefaultsobject: Default values used by both FAB composables; exposes shape (FormaUI's xl corner tier, used across all sizes).

Accessibility

A FAB is icon-only, so its content Icon must carry a contentDescription naming the action — as must FormaExtendedFloatingActionButton's icon, whose text label is hidden while expanded is false. Role.Button semantics and the touch target come from Material 3; the press-scale is a graphicsLayer effect only, so it never shrinks the touch target.

PreviousExposedDropdownMenu Next IconButton