IconButton

Icon buttons help people take actions with a single tap.

Props

React props
NameTypeRequiredDefaultDescription
labelstringYesAccessible name announced for the icon-only control.
iconIconYesIcon shown in the resting state.
tooltipstring | falseNoVisual tooltip text. Defaults to `label`; set to `false` to hide it.
pressedIconIconNoOptional icon shown while a toggle icon button is pressed.
variantIconButtonVariantNo'standard'Visual style.
sizeIconButtonSizeNo'medium'Visual size; every option retains at least a 48px touch target.
widthIconButtonWidthNo'default'Horizontal container width.
disabledbooleanNofalseDisables interaction.
shape"rounded" | "squared"No'rounded'Resting container shape.
shapeFeedbackButtonShapeFeedbackNo'morph'Shape feedback shown for accepted press and toggle interactions.
transitionTransitionNoMotion transition shared by every framework for shape changes.
toggleablebooleanNofalseEnables semantic pressed state for action buttons.
pressedbooleanNoControlled pressed state.
defaultPressedbooleanNofalseInitial pressed state when `pressed` is not controlled.
classNamestring | ClassNameComponent<IconButtonInterface> | Partial<Record<"stateLayer" | "touchTarget" | "icon" | "iconButton", string>>NoClasses or state-aware element classes applied through the shared style contract.
onPressedChange(pressed: boolean) => voidNoNotifies an accepted toggle-state request.