Split Button

Split Buttons contain two buttons paired to provide different, but related actions.

Overview

Split Buttons house variations of the same action, and are a good utility to save space in the interface. Avoid relying on Split Buttons frequently or in groups.

Split Buttons carry the same color styles and appearances as Buttons.

Usage

Split Buttons can be used to accommodate many workflows. For instance:

PrimarySecondary
SaveSave as
DownloadDownload with a specific file extension
OpenOpen with a specific program
EditEdit with
Add layerType of layer

Sample

Best practices

Below are important guidelines on using the Split Button component.

Do Split Button text labels
Do use text labels to provide context.
Avoid Split Button icon-only
Avoid using icon only Split Buttons when the icon's action is unclear.

Accessibility

Keyboard navigation

KeyFunction
EnterIf focused on the button, presses the component. If focused on the calcite-dropdown-group, expands or collapses the calcite-dropdown-items.
SpaceIf focused on the button, presses the component. If focused on the calcite-dropdown-group, expands or collapses the calcite-dropdown-items.
TabMoves focus to the calcite-dropdown-group. If the calcite-dropdown-group is focused, the focus will leave the component.
Tab and ShiftMoves focus to the button. If the button is focused, the focus will leave the component.

Refer to Dropdown for keyboard navigation.

Writing and copy

Refer to Button for writing and copy guidelines.

API reference

Properties

Slots

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.