Button

The Button component is used for any action or to trigger something. Ideally a button would fire a function or complete an action, rather than be used as a link.

Import

import
{
Button
}
from
'@blockstack/ui'
;

Usage

Preview
Editable example

Button Sizes

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

Preview
Editable example

Button modes

Use the mode prop to change the visual style of the Button. You can set the value to primary, secondary, or tertiary.

Preview
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

Preview
Editable example

Accessibility

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

Composition

Button composes Box and all props you pass (mode, bg, color, etc.) are converted to style props. This means you can override any style of the Button via props.

Preview
Editable example

Custom Button

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

Preview
Editable example

Props

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

NameTypeDefaultDescription
aria-labelstringThe label of the button
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
modeprimary secondary tertiaryprimaryThe variant of the button style to use.
sizesm, md, lgmdThe size of the button.