Component

Button

A FormaUI button — "Material 3 with better defaults" — one entry point covering all five Material 3 button variants via a single variant parameter, with a default-on press-scale micro-interaction layered on the ripple.

dev.formaui.components.button

filledtonalelevatedoutlinedtext

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

FormaButton(onClick = { /* submit */ }) {
    Text("Confirm")
}

FormaButton(onClick = { }, variant = FormaButtonVariant.Outlined, enabled = false) {
    Text("Disabled")
}

FormaButton

One entry point for all five Material 3 button variants, with FormaUI shape/padding defaults and an enforced 48dp minimum touch target.

ParameterTypeDefaultDescription

onClickrequiredType() -> UnitDefaultrequiredDescriptionCalled when the button is clicked. Not invoked while enabled is false.

modifierTypeModifierDefaultModifierDescriptionThe Modifier applied to the button. A minimum height of FormaButtonDefaults.MinTouchTargetSize is always merged in.

variantTypeFormaButtonVariantDefaultFormaButtonVariant.FilledDescriptionThe visual emphasis (defaults to FormaButtonVariant.Filled).

enabledTypeBooleanDefaulttrueDescriptionWhether the button is interactive. When false it is visually de-emphasised and does not respond to input.

shapeTypeShapeDefaultFormaButtonDefaults.shapeDescriptionThe button's container shape (defaults to FormaButtonDefaults.shape).

colorsTypeButtonColors?DefaultnullDescriptionThe container/content colors. When null, the Material 3 default colors for the chosen variant are used.

contentPaddingTypePaddingValuesDefaultFormaButtonDefaults.contentPaddingDescriptionPadding between the container edges and the content (defaults to FormaButtonDefaults.contentPadding).

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

pressedScaleTypeFloatDefaultFormaPressScaleDefaults.PressedScaleDescriptionThe scale factor applied while the button 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 RowScope.() -> UnitDefaultrequiredDescriptionThe button's content, laid out in a RowScope (typically a Text, optionally with a leading/trailing Icon).

Supporting API

FormaButtonVariantenum: Visual emphasis of a FormaButton, listed highest to lowest: Filled, Tonal, Elevated, Outlined, Text.
FormaButtonDefaultsobject: Defaults for FormaButton: MinTouchTargetSize (48dp), shape (FormaTheme.shapes.md), contentPadding (lg horizontal / xs vertical spacing tokens).
Modifier.formaPressScalemodifier: Reusable press-scale micro-interaction (dev.formaui.components.interaction): observes an InteractionSource and scales the element to pressedScale while pressed via graphicsLayer, so measured size and the 48dp touch target are unaffected. animationSpec = null disables it.
FormaPressScaleDefaultsobject: Defaults for Modifier.formaPressScale: PressedScale (0.97), DownAnimationSpec (a fast 100ms tween for the press dip), and AnimationSpec (a medium-stiffness, low-bouncy spring for the release spring-back).

Accessibility

A minimum 48dp touch target (FormaButtonDefaults.MinTouchTargetSize) is always enforced; Role.Button semantics and disabled state are inherited from the underlying Material 3 button.