Skip to main content
Version: 4.0.0-rc.7

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.

Usage

Import

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

Theme Key

Button

Variants

There are solid button, outline button and clear button types

Loading...

Size

Button can be small medium or large

Loading...

Colors

Loading...

Disabled

Loading...

Linear Gradient

Loading...

Icon Button

Can contain an Icon by setting the icon prop or placing an Icon component within the Button.

Loading...

Loading spinner

Loading...

Props

note

Includes all TouchableOpacityProps props.

NameTypeDefaultDescription
TouchableComponenttypeof ComponentComponent for user interaction.
ViewComponentReact ComponentComponent for container.
buttonStyleView StyleAdd additional styling for button component.
colorstring | primary | secondary | success | warning | errorColor of Button
containerStyleView StyleStyling for Component container.
disabledbooleanfalseDisables user interaction.
disabledStyleView StyleStyle of the button when disabled.
disabledTitleStyleText StyleStyle of the title when disabled.
iconIconNodeDisplays 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.
iconContainerStyleView StyleStyling for Icon Component container.
iconPositionleft | right | top | bottomleftDisplays Icon to the position mentioned. Needs to be used along with icon prop.
iconRightbooleanfalseDisplays Icon to the right of title. Needs to be used along with icon prop.
linearGradientPropsobjectDisplays a linear gradient. See usage.
loadingbooleanfalseProp to display a loading spinner.
loadingPropsActivityIndicatorPropsAdd additional props for ActivityIndicator component.
loadingStyleView StyleAdd additional styling for loading component.
radiusnumber | sm | md | lgxsRadius of button
raisedbooleanfalseAdd raised button styling (optional). Has no effect if type="clear".
sizesm | md | lgmdButton size
titlestring | ReactElement<{}, string | JSXElementConstructor<any>>Add button title.
titlePropsTextPropsAdd additional props for Text component.
titleStyleText StyleAdd additional styling for title component.
typesolid | clear | outlinesolidType of button.
uppercasebooleanfalseUppercase button title

Playground

Loading...