Components
Button
Triggers an action or event. Supports multiple variants, color roles, sizes, loading and disabled states, icon slots, and a polymorphic `as` prop.
Colors
Apply semantic color roles to communicate intent.
Sizes
Buttons are available in six sizes that scale consistently.
Loading & Disabled
Communicate pending actions or unavailable states.
With Icons
Add leading or trailing icons using startContent and endContent.
ButtonGroup
Group related buttons together horizontally.
Interactive Playground
Controls
Preview
Generated Code
<Button>Button</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "solid" | "soft" | "bordered" | "solid" | Controls the visual style of the button. |
| color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "default" | Semantic color role for the button. |
| colorDepth | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 | — | Specific palette shade override. |
| size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | "md" | Controls the button dimensions and font size. |
| radius | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full" | "md" | Border radius override. Inherits from context. |
| shadow | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "none" | Shadow depth for the button. |
| isDisabled | boolean | false | Disables the button and prevents interaction. |
| isLoading | boolean | false | Shows a loading spinner and disables interaction. |
| isIconOnly | boolean | false | Renders as a square icon button. Requires aria-label. |
| fullWidth | boolean | false | Stretches the button to fill its container width. |
| disableAnimation | boolean | false | Opt out of all animation effects. |
| disableRipple | boolean | false | Disables the ripple effect on press. |
| href | string | — | If provided, renders as an <a> element. |
| startContent | ReactNode | — | Content rendered before the button label. |
| endContent | ReactNode | — | Content rendered after the button label. |
| type | "button" | "submit" | "reset" | "button" | Native button type attribute. |
| as | ElementType | "button" | Polymorphic root element. Auto-set to 'a' when href is provided. |
| onPress | (e: PressEvent) => void | — | Called when the button is pressed (click, Enter, or Space). |
"solid" | "soft" | "bordered"
Controls the visual style of the button.
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"
Semantic color role for the button.
50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
Specific palette shade override.
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Controls the button dimensions and font size.
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"
Border radius override. Inherits from context.
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg"
Shadow depth for the button.
boolean
Disables the button and prevents interaction.
boolean
Shows a loading spinner and disables interaction.
boolean
Renders as a square icon button. Requires aria-label.
boolean
Stretches the button to fill its container width.
boolean
Opt out of all animation effects.
boolean
Disables the ripple effect on press.
string
If provided, renders as an <a> element.
ReactNode
Content rendered before the button label.
ReactNode
Content rendered after the button label.
"button" | "submit" | "reset"
Native button type attribute.
ElementType
Polymorphic root element. Auto-set to 'a' when href is provided.
(e: PressEvent) => void
Called when the button is pressed (click, Enter, or Space).