Skip to main content

IconButton

Inputs & Controls

IconButton

Compact tappable icon with ripple + state layer feedback.

Usage

Place inline actions inside Appbar, lists, or cards.

Highlights

  • Size tokens (sm, md, lg)
  • Supports toggle/disabled states

When to use it

  • Actions are purely iconographic.
  • You need secondary actions adjacent to content.

Related components

ButtonFABStateLayer

Examples​

Default​

Preview (Web)
import { IconButton } from 'react-native-molecules/components/IconButton';

export default function Example() {
  return <IconButton name="home-outline" onPress={() => console.log('Pressed')} />;
}
PropTypeDefaultDescription
accessibilityLabelstring | undefined——
onPress(((event: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void)) | undefined——
disabledboolean | undefined——
nameRequiredstring——
variantIconButtonVariant | undefined——
selectedboolean | undefined——
sizenumber | "sm" | "md" | "lg" | "xs" | undefined——
type"material-community" | "feather" | undefined——
animatedboolean | undefined——
styleStyleProp<TextStyle>——
iconStyleStyleProp<TextStyle>——
colorstring | undefined——
innerContainerStyleViewStyle | undefined——
stateLayerPropsViewProps | undefined——
Defined in react-native-molecules/components/IconButton