Button

The Button component is used to trigger an action or event.

Import

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

Sizes

Variants

Loading

Icons

ButtonGroup

Basic (With Ref)

Props

Button

Name	Type	Description	Default
colorScheme	string	The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").	'primary'
variant	ResponsiveValue<"solid" | "outline" | "ghost" | "link" | "unstyled">	The variant of the button style to use.	'solid'
isLoading	any	If true, the button will show a spinner.	-
size	ResponsiveValue<...> & ResponsiveValue<...>	The size of the button.	-
startIcon	Element | Element[]	The start icon element to use in the button.	-
endIcon	Element | Element[]	The end icon element to use in the button.	-
isLoadingText	string	The end icon element to use in the button.	-
spinner	Element	The spinner element to use when isLoading is set to true.	-
isDisabled	boolean	If true, the button will be disabled.	-
_text	ITextProps	Props to style the child text For providing props to Text inside Box	-
_stack	IStackProps	Props to be passed to the HStack used inside of Button.	-

Button implements Pressable, Box

ButtonGroup

Name	Type	Description	Default
direction	"column" | "row"	The direction of the Stack Items.	row
children	Element | Element[]	Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element.	-
variant	"solid" | "ghost" | "outline" | "link" | "unstyled"	The variant of the button style to use.	'solid'
size	"xs" | "sm" | "md" | "lg"	The start icon element to use in the button.	-
colorScheme	string	The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").	'primary'
isDisabled	boolean	If true, the button will be disabled.	-
isAttached	boolean	If true, button will be atttached together.	-

ButtonGroup implements Stack, Box

Styling

NativeBase ships with a default theme for each component.

Checkout the default theme of button

We can easily extend the button component theme using extendTheme function as shown below.

import { extendTheme, NativeBaseProvider } from "native-base";

const theme = extendTheme({

components: {

Button: {

baseStyle: {},

defaultProps: {},

variants: {},

sizes: {},

}

}

});

function MyApp() {

return (

<NativeBaseProvider theme={theme}>

{/* Rest of the app goes here */}

</NativeBaseProvider>

)

}

Read more about extending component theme here.

Accessibility

• Button has role set to button.
• When Button has focus, Space or Enter activates it.