Button

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#

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 Variant#

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

Editable Example

Button with Icon#

You can add left and right icons to the Button components. See how to add icons to your project

Editable Example

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

Editable Example

Button loading state#

Pass isLoading prop to the Button component to show it's loading state. You can optionally pass loadingText prop, if you do, the button will show a spinner and the loading text. Otherwise, the button will take the width of the text label and show only the spinner

Editable Example

Accessibility#

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

Composition#

Button composes PseudoBox and all props you pass (variant, variantColor, etc.) are converted to style props. This means you can override any style of the Button via props.

Editable Example

Custom Button#

In event you need to make your own custom button, you can leverage the PseudoBox component. It provides the hover, focus, active and disabled style props to style the button.

Editable Example

Props#

The Button composes the PseudoBox component so you can pass props for PseudoBox. These are props related to the Button component.

NameTypeDefaultDescription
aria-labelstringThe label of the button
variantColorstringThe color of the button. Use a color key passed in theme.colors.
variantoutline, ghost, unstyled , link , solidsolidThe variant of the button style to use.
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
sizesm, md, lgmdThe size of the button.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2019 Segun Adebayo