Button Group
Group multiple buttons together with shared styling and proper spacing.
Import
Usage
Colors
Variants
Select a color:
Default
Bordered
Light
Ghost
Ethereal
Sizes
Radius
Shadowed
Full Width
Disabled
Custom Implementation
Data Attributes
- -
data-slot="button-group"Button group container identifier
Accessibility
ARIA Attributes
- -
role="group"Applied to ButtonGroup for proper grouping semantics
ButtonGroup Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'bordered' | 'light' | 'ghost' | 'ethereal' | 'link' | - | Shared variant for all child buttons. |
| size | 'sm' | 'md' | 'lg' | - | Shared size for all child buttons. |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'lavender' | - | Shared color for all child buttons. |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'md' | Border radius for the group. |
| shadowed | boolean | false | Whether to add Material Design elevation shadows to all child buttons. |
| fullWidth | boolean | false | Whether buttons should span the full width of the container. |
| isDisabled | boolean | false | Whether all buttons in the group are disabled. |
Button (within ButtonGroup) Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'bordered' | 'light' | 'ghost' | 'ethereal' | 'link' | Inherited from ButtonGroup | Override the variant for this specific button. |
| size | 'sm' | 'md' | 'lg' | Inherited from ButtonGroup | Override the size for this specific button. |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'lavender' | Inherited from ButtonGroup | Override the color for this specific button. |
| shadowed | boolean | Inherited from ButtonGroup | Override the shadow for this specific button. |
| disabled | boolean | false | Disable this specific button. |
| loading | boolean | false | Show loading state for this specific button. |
| 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 this button should be square-shaped for icon-only usage. |
| disableRipple | boolean | false | Whether to disable the ripple effect for this button. |
| asChild | boolean | false | Render this button as a different element using Radix Slot. |
