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.

ButtonProps

Change the component to the HTML tag or custom component of the only child.

asChild

boolean

Main style of the button.

- `filled`: Button will be plain.

- `outlined`: Button will be transparent with an outline.

- `tinted`: Button will be filled but using a lighter color scheme.

- `ghost`: Button will look like a link. No borders, plain text.

- `contrast`: Button will be surface filled. No borders, plain text.

design

enum

Disable the button, preventing user interaction and adding opacity.

disabled

intent

Display a spinner to indicate to the user that the button is loading something after they interacted with it.

isLoading

If your loading state should only display a spinner, it's better to specify a label for it (a11y).

loadingLabel

string

If your loading state should also display a label, you can use this prop instead of `loadingLabel`.
**Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**

Button

Install#

Import#

Basic#