Button | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
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 the 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: any
Default: 'primary'
variant
The variant of the button style to use.
Type: any
Default: 'solid'
isLoading
If true, the button will show a spinner.
Type: any
isHovered
If true, the button will be in hovered state.
Type: any
isPressed
If true, the button will be in pressed state.
Type: any
isFocused
If true, the button will be focused.
Type: any
isFocusVisible
If true, the button focus ring will be visible.
Type: any
size
The size of the button.
Type: any
startIcon
The start icon element to use in the button.
Type: any
endIcon
The end icon element to use in the button.
Type: any
isLoadingText
The end icon element to use in the button.
Type: any
spinner
The spinner element to use when isLoading is set to true.
Type: any
isDisabled
If true, the button will be disabled.
Type: any
_text
Props to style the child text For providing props to Text inside Box
Type: any
_stack
Props to be passed to the HStack used inside of Button.
Type: any
_icon
Props to be passed to the Icon used inside of Button.
Type: any
spinnerPlacement
Prop to decide placement of spinner.
Type: any
Default: start
_loading
Props to be passed to the button when isLoading is true.
Type: any
_disabled
Props to be passed to the button when button is disabled.
Type: any
_spinner
Props to be passed to the spinner when isLoading is true.
Type: any
_hover
Props to be passed to the button when button is hovered.
Type: any
_pressed
Props to be passed to the button when button is pressed.
Type: any
_focus
Props to be passed to the button when button is focused.
Type: any
rightIcon
The right icon element to use in the button.
Type: any
leftIcon
The left icon element to use in the button.
Type: any
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: "link" | "unstyled" | "solid" | "ghost" | "outline"
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" | "lg" | "1" | "2xl" | "2.5" | "1.5" | "10" | "20" | "64" | ... 27 more ... | (string & {})>
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. Checkout the default theme of 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