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
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