Button
Buttons take a title and an optional material icon name, as well as the props below.
You can override Material icons with one of the following: material-community, simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo by providing an icon.type as a prop.
Usage
import { Button } from 'react-native-elements'
<Button
title='BUTTON' />
<Button
raised
icon={{name: 'cached'}}
title='BUTTON WITH ICON' />
<Button
large
rightIcon={{name: 'code'}}
title='LARGE WITH RIGHT ICON' />
<Button
large
icon={{name: 'envira', type: 'font-awesome'}}
title='LARGE WITH ICON TYPE' />
<Button
large
icon={{name: 'squirrel', type: 'octicon', buttonStyle: styles.someButtonStyle }}
title='OCTICON' />
Also receives all TouchableNativeFeedback (Android) or TouchableOpacity (iOS) props
Props
activityIndicatorStyle
backgroundColor
borderRadius
buttonStyle
Component
color
containerViewStyle
disabled
disabledStyle
disabledTextStyle
fontSize
fontFamily
fontWeight
iconComponent
large
leftIcon
oricon
loading
loadingRight
onLongPress
onPress
outline
raised
rightIcon
rounded
title
textStyle
underlayColor
Reference
activityIndicatorStyle
Loading spinner styling (optional)
Type | Default |
---|---|
object (style) | none |
backgroundColor
Background color of button (optional)
Type | Default |
---|---|
string (color) | #9E9E9E |
borderRadius
Adds border radius to button (optional) (Note: if you set this, don't forget to also set borderRadius to containerViewStyle prop, otherwise unexpected behaviour might occur)
Type | Default |
---|---|
number | none |
buttonStyle
Additional styling for button component (optional)
Type | Default |
---|---|
object (style) | none |
color
Font color (optional)
Type | Default |
---|---|
string (color) | white |
Component
Specify other touchable such as TouchableOpacity/TouchableNativeFeedback
Type | Default |
---|---|
React Native Component | TouchableHighlight (iOS), TouchableNativeFeedback (android) |
containerViewStyle
Styling for Component container
Type | Default |
---|---|
View style (object) | none |
disabled
Prop to indicate button is disabled (optional)
Type | Default |
---|---|
boolean | false |
disabledStyle
Disabled button styling (optional)
Type | Default |
---|---|
object (style) | none |
disabledTextStyle
Styles for the text when disabled (optional)
Type | Default |
---|---|
object (style) | none |
fontFamily
Specify different font family (optional)
Type | Default |
---|---|
string | System font (iOS), Sans Serif (android) |
fontSize
Font size (optional)
Type | Default |
---|---|
number | 18 |
fontWeight
Font weight for title (optional)
Type | Default |
---|---|
string | none |
iconComponent
Specify other icon component instead of default. The component will have all values from the icon prop
Type | Default |
---|---|
MaterialIcon | React Native Component |
large
Text styling (optional)
Type | Default |
---|---|
boolean | false |
leftIcon
or icon
Displays a centered icon (when no text) or to the left (with text). (can be used along with rightIcon as well)
Type | Default |
---|---|
object {name: string, color: string, size: number, type: string (default is material, or choose one of material-community, simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo), style: object(style)} | {color: 'white'} |
onLongPress
Callback fired when the user long presses (optional)
Type | Default |
---|---|
function | none |
onPress
Callback fired when the user presses (required)
Type | Default |
---|---|
function | none |
outline
Outlines the button (optional)
Type | Default |
---|---|
boolean | false |
raised
Add raised button styling (optional)
Type | Default |
---|---|
boolean | false |
rightIcon
Displays a rightIcon (can be used along with leftIcon as well)
Type | Default |
---|---|
object {name: string, color: string, size: number, type: string (default is material, or choose one of material-community, simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo), style: object(style)} | none |
loading
Display a loading spinner (optional)
Type | Default |
---|---|
boolean | false |
loadingRight
Display the spinner to the right (optional)
Type | Default |
---|---|
boolean | false |
rounded
Rounds the button (optional)
Type | Default |
---|---|
boolean | false |
title
Button title (required)
Type | Default |
---|---|
string | none |
textStyle
Text styling (optional)
Type | Default |
---|---|
object (style) | none |
transparent
Makes the button transparent (optional)
Type | Default |
---|---|
boolean | false |
underlayColor
Underlay color for button press (optional)
Type | Default |
---|---|
string(color) | transparent |