Back to React Native Paper

IconButton

docs/public/2.0/icon-button.html

5.15.11.2 KB
Original Source

IconButton

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

Icon button

Pressed icon button

Usage

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

const MyComponent = () => (
  <IconButton
    icon="add-a-photo"
    color={Colors.red500}
    size={20}
    onPress={() => console.log('Pressed')}
  />
);

export default MyComponent;

Props

icon (required) Type: IconSource

Icon to display.

color Type: string

Color of the icon.

size Type: number

Default value: 24

Size of the icon.

disabled Type: boolean

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

animated Type: boolean

Default value: false

Whether an icon change is animated.

accessibilityLabel Type: string

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

onPress Type: () => mixed

Function to execute on press.

style Type: any

theme Type: Theme