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

Loading...

Size

Loading...

Colors

Loading...

Button with icon

Loading...

Button with right icon

Loading...

Button with loading spinner

Loading...

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 | primary | secondary | success | warning | 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 | right | top | 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 | sm | md | lg	xs	Radius of button.
raised	boolean	false	Add raised button styling (optional). Has no effect if type="clear".
size	sm | md | lg	md	Button size.
title	string | ReactElement<{}, string | JSXElementConstructor<any>>		Add button title.
titleProps	TextProps		Add additional props for Text component.
titleStyle	Text Style		Add additional styling for title component.
type	solid | clear | outline	solid	Type of button.
uppercase	boolean	false	Uppercase button title.

Playground

Loading...