Version: Next

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