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

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	"material-community" | "feather" | 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