Button group
A Button group lets users make a selection from a set of options.
Deprecated
Garden does not presently recommend the use of Button groups
Used for this
- To make a selection from a set of options
Not for this
- To organize related content and controls within a single page, use Tabs instead
How to use it
Size
Button groups can be small, medium, or large. The default size is medium.
Type
Button groups can be default or primary.
How to use it well
This is a legacy component. Garden does not presently recommend the use of Button groups.
Configuration
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-buttons
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Button, ButtonGroup } from '@zendeskgarden/react-buttons'
API
Button
Extends ButtonHTMLAttributes<HTMLButtonElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | – | Applies inset box-shadow styling on focus |
isBasic | boolean | – | Applies basic button styling |
isDanger | boolean | – | Applies danger styling |
isLink | boolean | – | Applies link (anchor) button styling |
isNeutral | boolean | – | Applies neutral button styling |
isPill | boolean | – | Applies pill button styling |
isPrimary | boolean | – | Applies primary button styling |
isStretched | boolean | – | Stretches the button fill to its container width |
size | 'small' | 'medium' | 'large' | 'medium' | Specifies the button size |
ButtonGroup
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
onSelect | – | Handles button selection Parameters item The selected item | |
selectedItem | any | – | Defines the currently selected button in the group |