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

1
2
3
4
5
6
7
8
9
10
<calcite-split-button primary-text="Add a vegetable">
    <calcite-dropdown-group selection-mode="none" group-title="Recently added">
        <calcite-dropdown-item>Pea</calcite-dropdown-item>
        <calcite-dropdown-item>Parsnip</calcite-dropdown-item>
        <calcite-dropdown-item>Radish</calcite-dropdown-item>
        <calcite-dropdown-item>Tomato</calcite-dropdown-item>
        <calcite-dropdown-item>Rutabaga</calcite-dropdown-item>
        <calcite-dropdown-item>Bean</calcite-dropdown-item>
    </calcite-dropdown-group>
</calcite-split-button>
v3.0.3

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

PropertyAttributeDescriptionTypeDefault
appearanceappearanceSpecifies the appearance style of the component."outline" | "outline-fill" | "solid" | "transparent""solid"
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
dropdownIconTypedropdown-icon-typeSpecifies the icon used for the dropdown menu."caret" | "chevron" | "ellipsis" | "overflow""chevron"
dropdownLabeldropdown-labelAccessible name for the dropdown menu.string
flipPlacementsSpecifies the component's fallback slotted content placement when it's initial or specified placement has insufficient space available.Array<"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "leading-start" | "leading" | "leading-end" | "trailing-end" | "trailing" | "trailing-start">
kindkindSpecifies the kind of the component, which will apply to border and background, if applicable."brand" | "danger" | "inverse" | "neutral""brand"
loadingloadingWhen true, a busy indicator is displayed on the primary button.booleanfalse
overlayPositioningoverlay-positioningDetermines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed"."absolute" | "fixed""absolute"
placementplacementDetermines where the component will be positioned relative to the container element."bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start""bottom-end"
primaryIconEndprimary-icon-endSpecifies an icon to display at the end of the primary button.string
primaryIconFlipRtlprimary-icon-flip-rtlDisplays the primaryIconStart and/or primaryIconEnd as flipped when the element direction is right-to-left ("rtl")."both" | "end" | "start"
primaryIconStartprimary-icon-startSpecifies an icon to display at the start of the primary button.string
primaryLabelprimary-labelAccessible name for the primary button.string
primaryTextprimary-textText displayed in the primary button.string
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
widthwidthSpecifies the width of the component. [Deprecated] The "half" value is deprecated, use "full" instead."auto" | "full" | "half""auto"

Slots

NameDescription
default (unnamed)A slot for adding calcite-dropdown content.

Events

NameDescriptionBehavior
calciteSplitButtonPrimaryClickFires when the primary button is clicked.bubblescomposed
calciteSplitButtonSecondaryClickFires when the dropdown menu is clicked.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component's first focusable element.setFocus(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close