Version: 4.0.0-rc.3

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.

<Button title="Solid Button" />

Import

import { Button } from '@rneui/themed';

Usage

Variants

Size

Colors

Button with icon

Button with right icon

Button with loading spinner

Props

note

Includes all TouchableOpacity props.

Name	Type	Default	Description
`TouchableComponent`	typeof Component		Component for user interaction.
`ViewComponent`	React Component		Component for container.
`buttonStyle`	View Style		Add additional styling for button component.
`color`	`string` or `primary` or `secondary` or `success` or `warning` or `error`		Color of button.
`containerStyle`	View Style		Styling for Component container.
`disabled`	boolean	`false`	Disables user interaction.
`disabledStyle`	View Style		Style of the button when disabled.
`disabledTitleStyle`	Text Style		Style of the title when disabled.
`icon`	IconNode		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.
`iconContainerStyle`	View Style		Styling for Icon Component container.
`iconPosition`	`left` or `right` or `top` or `bottom`	`left`	Displays Icon to the position mentioned. Needs to be used along with `icon` prop.
`iconRight`	boolean	`false`	Displays Icon to the right of title. Needs to be used along with `icon` prop.
`linearGradientProps`	object		Displays a linear gradient.
`loading`	boolean	`false`	Prop to display a loading spinner.
`loadingProps`	ActivityIndicatorProps		Add additional props for ActivityIndicator component.
`loadingStyle`	View Style		Add additional styling for loading component.
`radius`	`number` or `sm` or `md` or `lg`	`xs`	Radius of button.
`raised`	boolean	`false`	Add raised button styling (optional). Has no effect if `type="clear"`.
`size`	`sm` or `md` or `lg`	`md`	Button size.
`title`	`string` or `ReactElement<{}, string` or `JSXElementConstructor<any>>`		Add button title.
`titleProps`	TextProps		Add additional props for Text component.
`titleStyle`	Text Style		Add additional styling for title component.
`type`	`solid` or `clear` or `outline`	`solid`	Type of button.
`uppercase`	boolean	`false`	Uppercase button title.

Import​

Usage​

Variants​

Size​

Colors​

Button with icon​

Button with right icon​

Button with loading spinner​

Props​

Playground​