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')} />;
}

Shape and width

Material 3 icon buttons support round or square containers and narrow, default, or wide widths.

Preview (Web)

import { View } from 'react-native';
import { IconButton } from 'react-native-molecules/components/IconButton';

export default function Example() {
  return (
      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
          <IconButton name="heart-outline" variant="contained-tonal" shape="round" width="narrow" />
          <IconButton name="heart-outline" variant="contained-tonal" shape="square" />
          <IconButton name="heart-outline" variant="contained-tonal" shape="round" width="wide" />
          <IconButton name="star-outline" variant="outlined" shape="square" width="wide" size={32} />
      </View>
  );
}

Prop	Type	Default	Description
accessibilityLabel	string | undefined	—	Accessibility label for the button. This is read by the screen reader when the user taps the button.
onPress	(((event: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void)) | undefined	—	Function to execute on press.
disabled	boolean | undefined	—	Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
nameRequired	string	—	Icon to display.
variant	IconButtonVariant | undefined	—	Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
selected	boolean | undefined	—	Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
size	number | "sm" | "md" | "xs" | "lg" | undefined	—	Size of the icon.
type	IconType | undefined	—	Type of the icon. Default is material Should be a number or a Design Token
animated	boolean | undefined	—	Whether an icon change is animated.
style	StyleProp<TextStyle>	—	backgroundColor and color will be extracted from here and act as buttonBackgroundColor and iconColor
iconStyle	StyleProp<TextStyle>	—	—
iconProps	Omit<IconProps, "style" | "color" | "size" | "name" | "type"> | undefined	—	—
color	string | undefined	—	color of the icon
stateLayerProps	ViewProps | undefined	—	Props for the state layer

Defined in react-native-molecules/components/IconButton