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
As a link
Buttons can be used as links.
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.
Name | Type | Default | Description |
---|---|---|---|
aria-label | string | The label of the button. | |
appearance | default , primary , link , subtle-link , none | default | The variant of the button style to use. |
disabled | boolean | If true , the button will be disabled. | |
loading | boolean | If true , the button will show a spinner. | |
loadingText | string | The label to show in the button when loading is true. If no text is passed, it only shows the spinner. | |
size | xs , sm , md , lg , xl | md | The size of the button. |
as | string | button | HTML element or custom component. |