Button
Buttons allow users to perform actions and make choices with a single tap.
Import
Usage
Colors
Variants
Select a color:
Default
Bordered
Light
Ghost
Ethereal
Sizes
Radius
Shadowed
With Icons
Start Content
End Content
Icon Only
Loading
Disabled
Custom Implementation
Custom Classes
Use className to apply custom Tailwind classes for wild and creative effects
Next.js Link Integration
Next.js Link
Combine Next.js Link with Button using asChild for client-side navigation
As Link / asChild
Note: For link styling, use the Link component instead. The asChild prop is for applying button styling to other elements.
Button styled as Link (asChild)
Use asChild to apply button styling to an anchor element
Link Component (Recommended)
Use the Link component for proper link styling with underline animations
Data Attributes
- -
data-slot="button"Main button element identifier - -
data-slot="button-group"Button group container identifier
Accessibility
Keyboard Support
- -
SpaceActivates the button - -
EnterActivates the button - -
TabMoves focus to the next focusable element
ARIA Attributes
- -
aria-disabledSet when button is disabled - -
aria-pressedSet when using the pressed prop for toggle buttons - -
aria-labelRequired for icon-only buttons to provide context for screen readers - -
role="group"Applied to ButtonGroup for proper grouping
Button Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'bordered' | 'light' | 'ghost' | 'ethereal' | 'default' | The visual style variant of the button. |
| size | 'sm' | 'md' | 'lg' | 'md' | The size of the button. |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'lavender' | 'default' | The color scheme of the button. |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'md' | The border radius of the button. |
| loading | boolean | false | Whether the button is in a loading state. |
| disabled | boolean | false | Whether the button is disabled. |
| startContent | ReactNode | - | Content to display before the button text (e.g., icons). |
| endContent | ReactNode | - | Content to display after the button text (e.g., icons). |
| iconOnly | boolean | false | Whether the button should be square-shaped for icon-only usage. |
| disableRipple | boolean | false | Whether to disable the ripple effect on button press. |
| shadowed | boolean | false | Whether to add a shadow to the button. |
| asChild | boolean | false | Render as a different element using Radix Slot. |
| pressed | boolean | - | Sets the aria-pressed attribute for toggle buttons. |
| aria-label | string | - | Accessible label for the button. Required for icon-only buttons. |
