Overview
The ButtonGroup component is designed to group multiple buttons together, allowing for better organization and user interaction. This is particularly useful when you have related actions that users can take, such as editing, deleting, or saving items.
Variants
The ButtonGroup component supports several color variants to suit different design needs. The available colors are:
- Default: A standard button group.
- Tonal: A softer, more subdued button group style.
- Outlined: A button group with a border and no background, ideal for secondary actions.
Mode
The ButtonGroup component supports two modes: single and multiple.
- Single Mode: Only one button can be selected at a time. This is useful for actions where only one selection is valid, such as choosing a primary action.
- Multiple Mode: Multiple buttons can be selected simultaneously. This is useful for actions where users can choose several options at once, such as selecting multiple items to perform batch actions.
API Reference
ButtonGroup
The main container component that groups multiple buttons together.
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | "filled" | "tonal" | "outlined" | "filled" | The visual variant of the button group |
shape | "round" | "square" | "round" | The shape style of the buttons |
mode | "single" | "multiple" | Required | Selection mode - single allows only one selection, multiple allows multiple selections |
children | React.ReactNode | Required | The ButtonGroupItem components to render |
Inherited Props
The ButtonGroup component also accepts all standard HTML div element props.
ButtonGroupItem
Individual button items within a button group.
Props
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | Required | The content to display in the button |
buttonProps | ButtonProps | {} | Additional props to pass to the underlying Button component |
Inherited Props
The ButtonGroupItem component accepts all standard HTML input element props since it renders as an input element for state management.