Split button
A Split button is a hybrid between a Dropdown Menu and a Button. It lets users choose from parallel actions and take action on their choice.
Table of Contents
Used for this
- To let users select from multiple parallel actions. Actions are parallel when each represents a path forward for the user and none cancel the action.
- To reduce visual complexity when there are multiple actions a user can take
How to use it
Default
The typical usage of a Split button component.
Danger
Use danger styling for Split buttons that enable destructive action.
Disabled
A disabled Split button prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not be read aloud by a screenreader.
Size
Split buttons can be small, medium, or large. The default size is medium.
Type
Split buttons are implemented in combination with a Menu component to show parallel actions. They can be default or primary.
Configuration
- Name8.42.0•View source•View on npm
- Installnpm install @zendeskgarden/react-buttons
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Button, ChevronButton, SplitButton } 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 buton size |
ChevronButton
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 button styling |
isNeutral | boolean | – | Applies neutral button styling |
isPill | boolean | – | Applies pill button styling |
isPrimary | boolean | – | Applies primary button styling |
isRotated | boolean | – | Rotates icon 180 degrees |
size | 'small' | 'medium' | 'large' | 'medium' | Specifies icon button size |
SplitButton
Extends HTMLAttributes<HTMLDivElement>