Skip to main content
Version: 1.2.0

Button

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 Button
Solid
Clear Button
Clear
Outline Button
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


Reference

buttonStyle

add additional styling for button component (optional)

TypeDefault
View style (object)none

containerStyle

styling for Component container

TypeDefault
View style (object)none

disabled

disables user interaction

TypeDefault
booleanfalse

disabledStyle

style of the button when disabled

TypeDefault
View style (object)Internal Style

disabledTitleStyle

style of the title when disabled

TypeDefault
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.

TypeDefault
{...Icon props}
OR
component
none

iconContainerStyle

styling for Icon Component container

TypeDefault
View style (object)none

iconRight

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

TypeDefault
booleanfalse

linearGradientProps

displays a linear gradient. See usage.

TypeDefault
{...Gradient props}none

loading

prop to display a loading spinner (optional)

TypeDefault
booleanfalse

loadingProps

add additional props for ActivityIndicator component (optional)

TypeDefault
{...ActivityIndicator props}Internal object

loadingStyle

add additional styling for loading component (optional)

TypeDefault
View style (object)Internal Style

onPress

onPress method (optional)

TypeDefault
functionnone

raised

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

TypeDefault
booleanfalse

title

button title (optional)

TypeDefault
stringnone

titleProps

add additional props for Text component (optional)

TypeDefault
{...Text props}none

titleStyle

add additional styling for title component (optional)

TypeDefault
Text style (object)none

type

Type of button (optional)

TypeDefault
solid, clear, outlinesolid

TouchableComponent

component for user interaction

TypeDefault
Touchable ComponentTouchableOpacity (ios) or TouchableNativeFeedback (android)

ViewComponent

component for container

TypeDefault
React Native ComponentView

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 },
}}
/>