Buttons are touchable elements used to interact with the screen. They may display text, icons, or both. Buttons can be styled with several props to look a specific way.

Solid
Clear
Outline

##
Usage

    import { Button } from 'react-native-elements';
    import Icon from 'react-native-vector-icons/FontAwesome';

    <Button
      title="Solid Button"
    />

    <Button
      title="Outline button"
      type="outline"
    />

    <Button
      title="Clear button"
      type="clear"
    />

    <Button
      icon={
        <Icon
          name="arrow-right"
          size={15}
          color="white"
        />
      }
      title="Button with icon component"
    />

    <Button
      icon={{
        name: "arrow-right"
        size: 15,
        color: "white"
      }}
      title="Button with icon object"
    />

    <Button
      icon={
        <Icon
          name="arrow-right"
          size={15}
          color="white"
        />
      }
      iconRight
      title="Button with right icon"
    />

    <Button
      title="Loading button"
      loading
    />

##
Props

> Also receives all TouchableNativeFeedback (Android) or TouchableOpacity (iOS) props

- `buttonStyle`
- `containerStyle`
- `disabled`
- `disabledStyle`
- `disabledTitleStyle`
- `icon`
- `iconContainerStyle`
- `iconRight`
- `linearGradientProps`
- `loading`
- `loadingProps`
- `loadingStyle`
- `onPress`
- `raised`
- `title`
- `titleProps`
- `titleStyle`
- `type`
- `TouchableComponent`
- `ViewComponent`

##
Reference

###
`buttonStyle`

add additional styling for button component (optional)

Type | Default
--- | ---
View style (object) | none

###
`containerStyle`

styling for Component container

Type | Default
--- | ---
View style (object) | none

###
`disabled`

disables user interaction

Type | Default
--- | ---
boolean | false

###
`disabledStyle`

style of the button when disabled

Type | Default
--- | ---
View style (object) | Internal Style

###
`disabledTitleStyle`

style of the title when disabled

Type | Default
--- | ---
Text style (object) | Internal Style

###
`icon`

displays a centered icon (when no title) or to the left (with text). (can be used along with iconRight as well). Can be an object or a custom component.

Type | Default
--- | ---
{...Icon props} OR component | none

###
`iconContainerStyle`

styling for Icon Component container

Type | Default
--- | ---
View style (object) | none

###
`iconRight`

displays Icon to the right of title. Needs to be used along with `icon` prop

Type | Default
--- | ---
boolean | false

###
`linearGradientProps`

displays a linear gradient. See usage.

Type | Default
--- | ---
{...Gradient props} | none

###
`loading`

prop to display a loading spinner (optional)

Type | Default
--- | ---
boolean | false

###
`loadingProps`

add additional props for ActivityIndicator component (optional)

Type | Default
--- | ---
{...ActivityIndicator props} | Internal object

###
`loadingStyle`

add additional styling for loading component (optional)

Type | Default
--- | ---
View style (object) | Internal Style

###
`onPress`

onPress method (optional)

Type | Default
--- | ---
function | none

###
`raised`

Add raised button styling (optional). Has no effect if `type="clear"`.

Type | Default
--- | ---
boolean | false

###
`title`

button title (optional)

Type | Default
--- | ---
string | none

###
`titleProps`

add additional props for Text component (optional)

Type | Default
--- | ---
{...Text props} | none

###
`titleStyle`

add additional styling for title component (optional)

Type | Default
--- | ---
Text style (object) | none

###
`type`

Type of button (optional)

Type | Default
--- | ---
`solid`, `clear`, `outline` | solid

###
`TouchableComponent`

component for user interaction

Type | Default
--- | ---
Touchable Component | TouchableOpacity (ios) or TouchableNativeFeedback (android)

###
`ViewComponent`

component for container

Type | Default
--- | ---
React Native Component | View

##
LinearGradient Usage

Using LinearGradient in React Native Elements is supported through the react-native-linear-gradient package. If you're using expo or create-react-native-app then you can use `linearGradientProps` prop right out the box with no additional setup.

For react-native-cli users, make sure to follow the installation instructions and use it like this:

    import { Button } from 'react-native-elements';
    import LinearGradient from 'react-native-linear-gradient';

    ...

    <Button
      ViewComponent={LinearGradient} // Don't forget this!
      linearGradientProps={{
        colors: ['red', 'pink'],
        start: { x: 0, y: 0.5 },
        end: { x: 1, y: 0.5 },
      }}
    />

← Badge ButtonGroup →