Logo

Button

A button is component that the user can press to trigger an action.

Text button
Outlined button
Contained button

Usage

import * as React from 'react';
import { Button } from 'react-native-paper';

const MyComponent = () => (
  <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
    Press me
  </Button>
);

export default MyComponent;

Props

mode
Type: 'text' | 'outlined' | 'contained'
Default value: 'text'

Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.

  • text - flat button without background or outline (low emphasis)
  • outlined - button with an outline (medium emphasis)
  • contained - button with a background color and elevation shadow (high emphasis)
dark
Type: boolean

Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for contained mode.

compact
Type: boolean

Use a compact look, useful for text buttons in a row.

color
Type: string

Custom text color for flat button, or background color for contained button.

loading
Type: boolean

Whether to show a loading indicator.

icon
Type: IconSource

Icon to display for the Button.

disabled
Type: boolean

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

children (required)
Type: React.ReactNode

Label text of the button.

uppercase
Type: boolean
Default value: true

Make the label text uppercased. Note that this won't work if you pass React elements as children.

accessibilityLabel
Type: string

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

accessibilityHint
Type: string

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

onPress
Type: () => void

Function to execute on press.

onLongPress
Type: () => void

Function to execute on long press.

contentStyle
Type: StyleProp<ViewStyle>

Style of button's inner content. Use this prop to apply custom height and width and to set the icon on the right with flexDirection: 'row-reverse'.

style
Type: StyleProp<ViewStyle>
labelStyle
Type: StyleProp<TextStyle>

Style for the button text.

theme
Type: ReactNativePaper.Theme
testID
Type: string

testID to be used on tests.

Edit this page