Button | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Button
The Button component triggers an event or an action. Examples can be submitting forms and deleting a data point.
Show Code
Playground
Import
Copy
import { Button } from "native-base";
Button : The button component with support for custom icons, spinners, etc.
Button.Group : 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
When you use the ButtonGroup component, it allows you to:
Set some common properties such as size & colorSchemes of all buttons within it.
Add spacing between the buttons.
Flush the buttons together by removing the border radius of its children as needed.
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: ColorSchemeType
Default: 'primary'
variant
The variant of the button style to use.
Type: ResponsiveValue<"link" | "subtle" | "solid" | "ghost" | "outline" | "unstyled" | (string & {})>
Default: 'solid'
isLoading
If true, the button will show a spinner.
Type: boolean
isHovered
If true, the button will be in hovered state.
Type: boolean
isPressed
If true, the button will be in pressed state.
Type: boolean
isFocused
If true, the button will be focused.
Type: boolean
isFocusVisible
If true, the button focus ring will be visible.
Type: boolean
size
The size of the button.
Type: ThemeComponentSizeType<"Button"> & ResponsiveValue<"full" | "sm" | "6" | "2xs" | "2" | "8" | "xs" | "3" | "12" | "md" | "4" | "16" | "xl" | "5" | "24" | "32" | "7" | "0.5" | ... 36 more ... | "5/6">
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
Type: Partial<ITextProps>
_stack
Props to be passed to the HStack used inside of Button.
Type: Partial<IStackProps>
_icon
Props to be passed to the Icon used inside of Button.
Type: Partial<IIconProps>
spinnerPlacement
Prop to decide placement of spinner.
Type: "start" | "end"
Default: start
_loading
Props to be passed to the button when isLoading is true.
Type: Partial<IButtonProps>
_disabled
Props to be passed to the button when button is disabled.
Type: Partial<IButtonProps>
_spinner
Props to be passed to the spinner when isLoading is true.
Type: Partial<ISpinnerProps>
_hover
Props to be passed to the button when button is hovered.
Type: Partial<IButtonProps>
_pressed
Props to be passed to the button when button is pressed.
Type: Partial<IButtonProps>
_focus
Props to be passed to the button when button is focused.
Type: Partial<IButtonProps>
rightIcon
The right icon element to use in the button.
Type: Element | Element[]
leftIcon
The left icon element to use in the button.
Type: Element | Element[]
ButtonGroup
direction
The direction of the Stack Items.
Type: "row" | "column"
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: ResponsiveValue<"link" | "subtle" | "solid" | "ghost" | "outline" | "unstyled">
Default: 'solid'
size
The start icon element to use in the button.
Type: ResponsiveValue<number | "full" | "sm" | "6" | "2xs" | "2" | "8" | "xs" | "3" | "12" | "md" | "4" | "16" | "xl" | "5" | "24" | "32" | "7" | "0.5" | "2.5" | "lg" | "1" | "2xl" | "1.5" | "10" | "20" | "64" | ... 27 more ... | "5/6">
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: ColorSchemeType
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