Button

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

Import

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

Sizes

Variants

Loading

Icons

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.

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<"outline" | "unstyled" | "subtle" | "solid" | "ghost" | (string & {}) | "link">	The variant of the button style to use.	'solid'
isLoading	boolean	If true, the button will show a spinner.	-
size	ResponsiveValue<number | "px" | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "0" | "container" | "3xs" | "1.5" | ... 29 more ... | (string & {})> & 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.	-
spinnerPlacement	"start" | "end"	Prop to decide placement of spinner.	start
_loading	any	Props to be passed to the button when isLoading is true.	-
_disabled	any	Props to be passed to the button when button is disabled.	-
_spinner	any	Props to be passed to the spinner when isLoading is true.	-
rightIcon	Element | Element[]	The right icon element to use in the button.	-
leftIcon	Element | Element[]	The left icon element to use in the 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	"outline" | "ghost" | "solid" | "link" | "unstyled"	The variant of the button style to use.	'solid'
size	ResponsiveValue<number | "px" | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "0" | "container" | "3xs" | "1.5" | ... 29 more ... | (string & {})>	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.