Version: 3.4.2

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

iconPosition#

displays Icon to the position mentioned. Needs to be used along with icon prop

TypeDefault
stringleft

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
string
OR
component
none

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

TouchableComponent#

component for user interaction

TypeDefault
Touchable ComponentTouchableOpacity (ios) or TouchableNativeFeedback (android) or TouchableOpacity (android, if linearGradientProps exists)

type#

Type of button (optional)

TypeDefault
solid, clear, outlinesolid

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

Also See#

Floating Action Button