Button
Buttons are touchable elements used to interact with the screen and to perform and operation.
They may display text, icons, or both. Buttons can be styled with several props to look a specific way.
Also receives all TouchableNativeFeedback (Android) or TouchableOpacity (iOS) props.
Usage#
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 }, }}/>Props#
Button#
- TouchableComponent
- ViewComponent
- buttonStyle
- containerStyle
- disabled
- disabledStyle
- disabledTitleStyle
- icon
- iconContainerStyle
- iconPosition
- iconRight
- linearGradientProps
- loading
- loadingProps
- loadingStyle
- raised
- title
- titleProps
- titleStyle
- type
Reference#
Button#
TouchableComponent#
Component for user interaction.
| Type | Default |
|---|---|
| any | None |
ViewComponent#
Component for container.
| Type | Default |
|---|---|
| React Component | None |
buttonStyle#
Add additional styling for button component.
| Type | Default |
|---|---|
| View style(Object) | None |
containerStyle#
Styling for Component container.
| Type | Default |
|---|---|
| View style(Object) | None |
disabled#
If true, disable all interactions for this component.
Disables user interaction.
| Type | Default |
|---|---|
| boolean | false |
disabledStyle#
Style of the button when disabled.
| Type | Default |
|---|---|
| View style(Object) | None |
disabledTitleStyle#
Style of the title when disabled.
| Type | Default |
|---|---|
| Text Style(Object) | None |
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 |
|---|---|
| any | None |
iconContainerStyle#
Styling for Icon Component container.
| Type | Default |
|---|---|
| View style(Object) | None |
iconPosition#
Displays Icon to the position mentioned. Needs to be used along with icon prop.
| Type | Default |
|---|---|
| "left" or "right" or "top" or "bottom" | left |
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 |
|---|---|
| object | None |
loading#
Prop to display a loading spinner.
| Type | Default |
|---|---|
| boolean | false |
loadingProps#
Add additional props for ActivityIndicator component.
| Type | Default |
|---|---|
| ActivityIndicatorProps | None |
loadingStyle#
Add additional styling for loading component.
| Type | Default |
|---|---|
| View style(Object) | None |
raised#
Add raised button styling (optional). Has no effect if type="clear".
| Type | Default |
|---|---|
| boolean | false |
title#
Add button title.
| Type | Default |
|---|---|
| any |
titleProps#
Add additional props for Text component.
| Type | Default |
|---|---|
| TextProps | None |
titleStyle#
Add additional styling for title component.
| Type | Default |
|---|---|
| Text Style(Object) | None |
type#
Type of button.
| Type | Default |
|---|---|
| "solid" or "clear" or "outline" | solid |