Version: 3.0.0-next.38

Button

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

Implements#

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. -
_hover IButtonProps Passed props will be applied on hovered state. -
_pressed IButtonProps Passed props will be applied on pressed state. -
_focus IButtonProps Passed props will be applied on focused state. -

ButtonGroup implements Stack, Box

Accessibility#

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