Button

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Import#

import { Button } from '@nature-ui/core';

Usage#

Editable Example

Button Sizes#

Use the size prop to change the size of the button. You can set the value to xs, sm, md, or lg.

Editable Example

Button variants#

Use the variant prop to change the visual style of the Button. You can set the value to either solid, ghost, outline, or link.

Editable Example

Button with icon#

You can add left and right icons to the Button component using the leftIcon and RightIcon props respectively.

Note: The leftIcon and rightIcon prop values should be react elements NOT strings.

Editable Example

You can also use icons from popular libraries like react-icons and pass it into the button.

Note: @nature-ui/icons exports each of these icon packs

Editable Example

Button loading state#

Pass the isLoading prop to show its loading state. By default, the button will show a spinner and leave the button's width unchanged.

You can also pass the loadingText prop to show a spinner and the loading text.

Editable Example

Accessibility#

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

Composition#

All props you pass (variant, color, etc.) are converted to style props. This means you can override any style of the Button with custom tailwindcss classes or the emotion css prop.

Editable Example

Props#

Button composes the Box component so you can pass all props for Box. These are props specific to the Button component.

NameTypeDefaultDescription
aria-labelstringAn accessible label for the button, useful when you render only an icon in the button
colorstringblueThe color scheme of the button. Use the colors in theme.colors that have 100 - 900 values
leftIconReactElementThe left icon element to use in the button
rightIconReactElementThe right icon element to use in the button
spinnerReactElementThe spinner element to use when isLoading is set to true
variantoutline, ghost, none , link , solidsolidThe variant of the button style to use.
isDisabledbooleanfalseIf true, the button will be disabled.
isLoadingbooleanfalseIf 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
sizesm, md, lgmdThe size of the button.