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.
Name@spark-ui/button
Version2.2.1
LicenseMIT
Button#
| Attribute | Type | Description | Default |
| asChild | boolean | Change the component to the HTML tag or custom component of the only child. | null |
| isLoading | boolean | Display a spinner to indicate to the user that the button is loading something after they interacted with it. | {"value":false} |
| loadingLabel | string | If your loading state should only display a spinner, it's better to specify a label for it (a11y). | null |
| loadingText | 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.** | null |
| spinnerPlacement | "left" | "right" | - | left |
| disabled | boolean | Disable the button, preventing user interaction and adding opacity. | {"value":false} |
| design | "filled" | "outlined" | "tinted" | "ghost" | "contrast" | 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. | filled |
| intent | "main" | "support" | "accent" | "basic" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | Color scheme of the button. | main |
| shape | "rounded" | "square" | "pill" | - | rounded |
| size | "sm" | "md" | "lg" | - | md |