Table of Contents

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

How to use it
Configuration
API

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

Not for this

To provide a way to navigate between pages, use Anchor instead
To provide a way to choose between primary and secondary actions, use two different Buttons instead

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

Name9.0.0-next.26•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

The SplitButton component follows this structure:

<SplitButton>  <Button />  <Dropdown>    <Trigger>      <ChevronButton />    </Trigger>    <Menu>      <Item />      <Item />      {/* etc. */}    </Menu>  </Dropdown></SplitButton>

Implementation notes

The split button pattern contains:

SplitButton component as a container
Button component for the main action
ChevronButton component to show/hide secondary actions
Dropdown, Menu and Trigger components for the secondary actions menu

Button

Extends ButtonHTMLAttributes<HTMLButtonElement>

The Button component applies appropriate styles based on its usage and the props provided.

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

ChevronButton

Extends ButtonHTMLAttributes<HTMLButtonElement>

Nest the ChevronButton within a Trigger component.

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
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 the button size

SplitButton

Extends HTMLAttributes<HTMLDivElement>

The SplitButton component applies appropriate styles to group the primary action Button together with the ChevronButton that shows/hides the secondary actions.