React SDK

Button

The Button component is used to trigger an action or event, such as submitting a form, opening a modal.

Usage

Editable Example

Sizes

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

Editable Example

Props

Appearance

Use the appearance prop to change the visual style of the Button. You can set the value to default, primary, link, or subtle-link.

Editable Example

Buttons can be used as links.

Editable Example
View

Disabled state

Pass disabled prop to the Button component to disable it's functionality. This will disable the buttons default functionality and dim it's appearance.

Editable Example

Accessibility

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

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.
appearancedefault, primary, link, subtle-link, nonedefaultThe variant of the button style to use.
disabledbooleanIf true, the button will be disabled.
loadingbooleanIf true, the button will show a spinner.
loadingTextstringThe label to show in the button when loading is true. If no text is passed, it only shows the spinner.
sizexs, sm, md, lg , xlmdThe size of the button.
asstringbuttonHTML element or custom component.