Version: 3.0.0-next.36

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#

NameTypeDescriptionDefault
ariaLabelstringAn accessible label for the button, useful when you render only an icon in the button.-
highlightnumberActive opacity of the button.-
colorSchemestringThe color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").gray
startIconJSX.ElementThe start icon element to use in the button.-
endIconJSX.ElementThe end icon element to use in the button.-
spinnerJSX.ElementThe spinner element to use when isLoading is set to true.-
variantghost, link, outline, solid, unstyledThe variant of the button style to use.solid
isDisabledbooleanIf true, the button will be disabled.-
isLoadingbooleanIf true, the button will show a spinner.-
loadingTextstringThe label to show in the button when isLoading is true. If no text is passed, it only shows the spinner-
sizelg, md, sm, xsThe size of the button.md
shadownumberShadow to apply to button.-
onPressfunctionCallback for onPress.-
_textTextPropsProps to style the child text-