An icon button is a button which displays only an icon without a label.

Default icon button
Contained icon button
Contained-tonal icon button
Outlined icon button


import * as React from 'react';
import { IconButton, MD3Colors } from 'react-native-paper';

const MyComponent = () => (
    onPress={() => console.log('Pressed')}

export default MyComponent;


Icon to display.

Available in v5.x with theme version 3
Type: 'outlined' | 'contained' | 'contained-tonal'

Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.

Renamed from 'color' to 'iconColor' in v5.x
Type: string

Color of the icon.

Type: string

Background color of the icon container.

Available in v5.x with theme version 3
Type: boolean
Default value: false

Whether icon button is selected. A selected button receives alternative combination of icon and container colors.

Type: number
Default value: 24

Size of the icon.

Type: boolean

Whether the button is disabled. A disabled button is greyed out and onPress is not called on touch.

Type: boolean
Default value: false

Whether an icon change is animated.

Type: string

Accessibility label for the button. This is read by the screen reader when the user taps the button.

Type: (e: GestureResponderEvent) => void

Function to execute on press.

Type: React.RefObject<View>
Type: ThemeProp
...TouchableRipple propsEdit this page