Button | NativeBase | Universal Components for React and React Native

Search
K
Hire us
If you are starting a new project, please try gluestack-ui for better performance and new design.
Button
The Button component is used to trigger an action or event.
Import
Copy
import { Button, ButtonGroup } from 'native-base';
Button : The button component with support for custom icons, spinners, etc.
ButtonGroup : Used to group buttons whose actions are related, with an option to flush them together.
Examples
Basic
Playground
Sizes
Playground
Variants
Playground
Loading
Playground
Icons
Playground
ButtonGroup
Playground
Basic (With Ref)
Playground
Props
Button
colorScheme
The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
Type: string
Default: 'primary'
variant
The variant of the button style to use.
Type: ResponsiveValue<"link" | "outline" | "ghost" | "solid" | "unstyled">
Default: 'solid'
isLoading
If true, the button will show a spinner.
Type: any
size
The size of the button.
Type: ResponsiveValue<"xs" | "sm" | "md" | "lg">
startIcon
The start icon element to use in the button.
Type: Element | Element[]
endIcon
The end icon element to use in the button.
Type: Element | Element[]
isLoadingText
The end icon element to use in the button.
Type: string
spinner
The spinner element to use when isLoading is set to true.
Type: Element
isDisabled
If true, the button will be disabled.
Type: boolean
_text
Props to style the child text For providing props to Text inside Box
_stack
Props to be passed to the HStack used inside of Button.
ButtonGroup
direction
The direction of the Stack Items.
Type: "column" | "row"
Default: row
children
Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element.
Type: Element | Element[]
variant
The variant of the button style to use.
Type: "link" | "ghost" | "outline" | "solid" | "unstyled"
Default: 'solid'
size
The start icon element to use in the button.
Type: "xs" | "sm" | "md" | "lg"
colorScheme
The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
Type: string
Default: 'primary'
isDisabled
If true, the button will be disabled.
Type: boolean
isAttached
If true, button will be atttached together.
Type: boolean
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the button.
Info: We can easily extend the button component theme using extendTheme function as described in the documentation .
Accessibility
Button has role set to .
When Button has focus, Space or Enter activates it.
Nativebase logo
MadeWithNativeBase