DocsComponentsButton
Button
Button allows users to perform actions and choose with a single tap or more.
Usage
Disabled
Sizes
Radius
Colors
Variants
Loading
Using the Spinner component and using the data-disabled attribute, you can make it a loading button.
Or you can use any custom spinner.
With Icons
Icon Only
Custom Styles
You can customize the Button component by passing custom Tailwind CSS classes to the component slot.
Button Group
Group Disabled
Data Attributes
Button has the following attributes on the base element:
- data-disabled: Whether the button is disabled.
- data-icon-only: Whether the button should have the same width and height.
- data-full-width: Whether the button should take the full width of its parent.
ButtonGroup has the following attribute on the base element:
- data-full-width: Whether the buttons should take the full width of its parent.
Accessibility
- Button has role of button.
- Keyboard event support for Space and Enter keys.
- Mouse and touch event handling, and press state management.
- Keyboard focus management and cross browser normalization.
Button Properties
| Property | Type | Description | Default |
|---|---|---|---|
| size | sm | md | lg | The size of the button. | md |
| color | foreground | default | primary | secondary | success | warning | danger | The color of the button. | default |
| radius | none | sm | md | lg | full | The radius of the button. | md |
| variant | solid | bordered | light | flat | faded | shadow | dot | The button appearance style. | solid |
| data-full-width | "true" | "false" | Whether the card should take the full width of its parent. | false |
| data-icon-only | "true" | "false" | Whether the button should have the same width and height. | false |
| data-disabled | "true" | "false" | Whether the card should be disabled. | false |
| data-disable-animation | "true" | "false" | Whether to disable the animation. | false |
| data-disable-ripple | "true" | "false" | Whether to disable ripple effect. | false |