Split Button

Calcite Split Buttons are essentially two buttons paired to provide different but related actions.

Overview

Used to house variations of the same action, Split Buttons are a good utility to save space. 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 in many ways. Here are a few examples (Primary, Secondary):

  • Save, Save as
  • Download, Download with specific file extension
  • Open, Open with specific program
  • Edit, Edit with
  • Add layer, Type of layer

Refer to Button for color and appearance usage.

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Best practices

Below are important guidelines on using the Split Button component.

Do Split Button text labels
Do use text labels with icons or buttons to keep the meaning clear.
Avoid Split Button icon-only
Avoid using icon only Split Buttons when the icon action is unclear.

Accessibility

Keyboard navigation

KeyFunction
TabMove focus to next item. If the current focus is the last item, the focus will leave the component
Tab and ShiftMove focus to previous item. If the current focus is the first item, the focus will leave the component
EnterIf focused on button, press. Toggle (expand/collapse) dropdown
SpaceIf focused on button, press. Toggle (expand/collapse) dropdown

Refer to Dropdown for keyboard navigation.

Writing and copy

Refer to Button for writing and copy guidelines.

API reference

calcite-split-button
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
appearanceappearance

specify the appearance style of the button, defaults to solid.

typedChoose from a set of typed values
clearoutlinesolid (default)transparent
colorcolor

specify the color of the control, defaults to blue

typedChoose from a set of typed values
blue (default)inverseneutralred
disableddisabled

is the control disabled

booleanA boolean property should be present, or not
truefalse
dropdownIconTypedropdown-icon-type

specify the icon used for the dropdown menu, defaults to chevron

typedChoose from a set of typed values
caretchevron (default)ellipsisoverflow
dropdownLabeldropdown-label

aria label for overflow button

optional
stringA custom string
undefined
loadingloading

optionally add a calcite-loader component to the control, disabling interaction. with the primary button

booleanA boolean property should be present, or not
truefalse
overlayPositioningoverlay-positioning

Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value.

typedChoose from a set of typed values
absolute (default)fixed
primaryIconEndprimary-icon-end

optionally pass an icon to display at the end of the primary button - accepts Calcite UI icon names

optional
stringA custom string
undefined
primaryIconFlipRtlprimary-icon-flip-rtl

flip the primary icon(s) in rtl

optional
typedChoose from a set of typed values
bothendstart
primaryIconStartprimary-icon-start

optionally pass an icon to display at the start of the primary button - accepts Calcite UI icon names

optional
stringA custom string
undefined
primaryLabelprimary-label

optionally pass an aria-label for the primary button

optional
stringA custom string
undefined
primaryTextprimary-text

text for primary action button

stringA custom string
undefined
scalescale

specify the scale of the control, defaults to m

typedChoose from a set of typed values
lm (default)s
widthwidth

specify the width of the button, defaults to auto

typedChoose from a set of typed values
auto (default)fullhalf

Events

NameDescriptionDetail
calciteSplitButtonPrimaryClick

fired when the primary button is clicked

bubblescomposedcancelable
any
calciteSplitButtonSecondaryClick

fired when the secondary button is clicked

bubblescomposedcancelable
any

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-dropdown` content.

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