sp-split-button

Deprecation Warning
@spectrum-web-components/split-button is deprecated and will be removed in the SWC 1.0 release.. Use a button group to show any additional actions related to the most critical action. Refer Spectrum documentation for more information.

NPM

0.44.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description disabled disabled boolean false Disable this control. It will not receive focus or events focused focused boolean false icons icons 'only' | 'none' | undefined invalid invalid boolean false label label string | undefined left left boolean false open open boolean false pending pending boolean false Whether the items are currently loading. pendingLabel pending-label string 'Pending' Defines a string value that labels the Picker while it is in pending state. placement placement "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" 'bottom-start' quiet quiet boolean false readonly readonly boolean false tabIndex tabIndex number The tab index to apply to this control. See general documentation about the tabindex HTML property type type SplitButtonTypes 'field' value value string '' variant variant ButtonVariants 'accent' The visual variant to apply to this button.

Slots #

Name Description default slot menu items to be listed in the Button tooltip Tooltip to to be applied to the the main Button

Events #

Name Type Description change Event

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/split-button

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/split-button

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/split-button

0.42.4 (2024-05-14) #

Note: Version bump only for package @spectrum-web-components/split-button

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/split-button

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/split-button

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/split-button

0.42.0 (2024-03-19) #

Bug Fixes #

  • theme: deprecate lightest and darkest color stops (#4179) (0c01a66)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/split-button

0.41.1 (2024-02-22) #

Note: Version bump only for package @spectrum-web-components/split-button

0.41.0 (2024-02-13) #

Note: Version bump only for package @spectrum-web-components/split-button

0.40.5 (2024-02-05) #

Note: Version bump only for package @spectrum-web-components/split-button

0.40.4 (2024-01-29) #

Bug Fixes #

  • picker,action-menu,split-button: update interaction model (#3935) (bae7d52)

0.40.3 (2024-01-11) #

Note: Version bump only for package @spectrum-web-components/split-button

0.40.2 (2023-12-18) #

Note: Version bump only for package @spectrum-web-components/split-button

0.40.1 (2023-12-05) #

Note: Version bump only for package @spectrum-web-components/split-button

0.40.0 (2023-11-16) #

Note: Version bump only for package @spectrum-web-components/split-button

0.39.4 (2023-11-02) #

Note: Version bump only for package @spectrum-web-components/split-button

0.39.3 (2023-10-18) #

Note: Version bump only for package @spectrum-web-components/split-button

0.39.2 (2023-10-13) #

Bug Fixes #

  • update deps graph, update link docs (#3709) (2deb284)

0.39.1 (2023-10-06) #

Note: Version bump only for package @spectrum-web-components/split-button

0.39.0 (2023-09-25) #

Bug Fixes #

  • picker,split-button: include "tooltip" slot in the main button (699b8af)

0.38.0 (2023-09-05) #

Bug Fixes #

  • action-menu,split-button: ensure toggling the Menu closed completes (2dd0f98)

0.37.0 (2023-08-18) #

Features #

  • picker,action-group,split-button: leverage Overlay v2 (170a223)

Performance Improvements #

  • make lots of things lazy (b8fa3ad)

0.36.0 (2023-08-18) #

Features #

  • menu: convert to core tokens (#3254) (da43540)

0.35.0 (2023-07-31) #

Bug Fixes #

  • split-button: update more button label application (#3354) (b4c9595), closes #3305

0.34.0 (2023-07-11) #

Bug Fixes #

  • action-button,action-menu,picker,split-button: expand and update application of aria-* attributes (52c0156)

0.33.2 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/split-button

0.33.1 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/split-button

0.33.0 (2023-06-08) #

Note: Version bump only for package @spectrum-web-components/split-button

0.32.0 (2023-06-01) #

Note: Version bump only for package @spectrum-web-components/split-button

0.31.0 (2023-05-17) #

Note: Version bump only for package @spectrum-web-components/split-button

0.30.0 (2023-05-03) #

Bug Fixes #

  • abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)
  • add t-shirt sizing to Thumbnail and support for "xxs"/"xs" sizes (520a642)
  • allow Picker to be reparented (39e7309)
  • analyze errors, properly this time (df685a2)
  • analyze type errors, and add deprecated syntax tests (b7e67a1)
  • correct dependency graph (69165eb)
  • expand sync offering for elements with overlay content (0195843)
  • include the "types" entry in package.json files (b432f59)
  • modify overrides for new Button CSS (8a36124)
  • picker: use "modal" as the menu overlay interaction (c8fbbe2)
  • remove usage where deprecated (387db3b)
  • simplify optionsMenu usage and fix tests (91241b7)
  • slot documentation (0ebd260)
  • split-button tests & lots of cleanup based on review feedback (10b4a04), closes #1189
  • split-button: correct style application (a954fdf)
  • split-button: follow visible tab order (966d3b6)
  • split-button: hide "selected" item from menu (322a966)
  • split-button: remove "popover" from render path (f1cd7ca)
  • split-button: test a11y correctly, find issues, fix them (4283994)
  • stop merging selectors in a way that alters the cascade (369388f)
  • support a wider number of sizes (ee44978)
  • tags: support distant sibling selectors (a8dcf7f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • update to latest spectrum-css packages (a5ca19f)
  • use icons without "size" values (3fc7c91)
  • use latest @spectrum-css/* versions (c35eb86)

Features #

  • action-button: add action button pattern (03ac00a)
  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • button: use synthetic button instead of native (49e94bc)
  • include all Dev Mode files in side effects (f70817c)
  • leverage latest Spectrum button API (9caf2f6)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • split-button: add split-button pattern (d3d8240)
  • split-button: add split-button pattern (012b7f8)
  • split-button: add split-button pattern (4833a59)
  • split-button: update spectrum css input (7d83331)
  • tabs: add sp-tab-panel element (b17d276)
  • update to Spectrum CSS v3.0.0 (e8b3d8f)
  • use latest exports specification (a7ecf4b)
  • use SixedMixin to manage "size" property (8819821)

0.9.17 (2023-04-24) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.16 (2023-04-05) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.15 (2023-03-22) #

Bug Fixes #

  • split-button: correct style application (a954fdf)

0.9.14 (2023-03-08) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.13 (2023-02-13) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.12 (2023-02-08) #

Bug Fixes #

  • modify overrides for new Button CSS (8a36124)

0.9.11 (2023-01-23) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.10 (2023-01-09) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.9 (2022-12-08) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.8 (2022-11-21) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.7 (2022-11-14) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.6 (2022-10-28) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.5 (2022-10-17) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.4 (2022-10-10) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.3 (2022-09-15) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.2 (2022-09-14) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.1 (2022-08-24) #

Note: Version bump only for package @spectrum-web-components/split-button

0.9.0 (2022-08-09) #

Features #

  • include all Dev Mode files in side effects (f70817c)

0.8.10 (2022-08-04) #

Note: Version bump only for package @spectrum-web-components/split-button

0.8.9 (2022-07-18) #

Note: Version bump only for package @spectrum-web-components/split-button

0.8.8 (2022-06-29) #

Note: Version bump only for package @spectrum-web-components/split-button

0.8.7 (2022-06-07) #

Note: Version bump only for package @spectrum-web-components/split-button

0.8.6 (2022-05-27) #

Note: Version bump only for package @spectrum-web-components/split-button

0.8.5 (2022-05-12) #

Note: Version bump only for package @spectrum-web-components/split-button

0.8.4 (2022-04-21) #

Bug Fixes #

  • allow Picker to be reparented (39e7309)

0.8.3 (2022-03-30) #

Note: Version bump only for package @spectrum-web-components/split-button

0.8.2 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/split-button

0.8.1 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/split-button

0.8.0 (2022-03-04) #

Features #

  • leverage latest Spectrum button API (9caf2f6)

0.7.7 (2022-02-22) #

Note: Version bump only for package @spectrum-web-components/split-button

0.7.6 (2022-02-03) #

Note: Version bump only for package @spectrum-web-components/split-button

0.7.5 (2022-02-02) #

Bug Fixes #

  • split-button: remove "popover" from render path (f1cd7ca)

0.7.4 (2022-01-26) #

Note: Version bump only for package @spectrum-web-components/split-button

0.7.3 (2022-01-26) #

Note: Version bump only for package @spectrum-web-components/split-button

0.7.2 (2022-01-07) #

Note: Version bump only for package @spectrum-web-components/split-button

0.7.1 (2021-12-13) #

Bug Fixes #

  • add t-shirt sizing to Thumbnail and support for "xxs"/"xs" sizes (520a642)

0.7.0 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/split-button

0.6.1 (2021-11-08) #

Bug Fixes #

  • abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)

0.6.0 (2021-11-02) #

Bug Fixes #

  • picker: use "modal" as the menu overlay interaction (c8fbbe2)

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.5.11 (2021-10-12) #

Note: Version bump only for package @spectrum-web-components/split-button

0.5.10 (2021-10-05) #

Note: Version bump only for package @spectrum-web-components/split-button

0.5.9 (2021-09-20) #

Note: Version bump only for package @spectrum-web-components/split-button

0.5.8 (2021-09-13) #

Note: Version bump only for package @spectrum-web-components/split-button

0.5.7 (2021-08-24) #

Note: Version bump only for package @spectrum-web-components/split-button

0.5.6 (2021-08-17) #

Note: Version bump only for package @spectrum-web-components/split-button

0.5.5 (2021-08-03) #

Bug Fixes #

  • expand sync offering for elements with overlay content (0195843)
  • split-button: hide "selected" item from menu (322a966)

0.5.4 (2021-07-22) #

Note: Version bump only for package @spectrum-web-components/split-button

0.5.3 (2021-07-01) #

Note: Version bump only for package @spectrum-web-components/split-button

0.5.2 (2021-06-16) #

Note: Version bump only for package @spectrum-web-components/split-button

0.5.1 (2021-06-07) #

Note: Version bump only for package @spectrum-web-components/split-button

0.5.0 (2021-05-24) #

Features #

  • tabs: add sp-tab-panel element (b17d276)

0.4.7 (2021-05-12) #

Note: Version bump only for package @spectrum-web-components/split-button

0.4.6 (2021-04-15) #

Note: Version bump only for package @spectrum-web-components/split-button

0.4.5 (2021-04-09) #

Note: Version bump only for package @spectrum-web-components/split-button

0.4.4 (2021-03-29) #

Note: Version bump only for package @spectrum-web-components/split-button

0.4.3 (2021-03-22) #

Note: Version bump only for package @spectrum-web-components/split-button

0.4.2 (2021-03-22) #

Bug Fixes #

  • analyze errors, properly this time (df685a2)
  • analyze type errors, and add deprecated syntax tests (b7e67a1)
  • remove usage where deprecated (387db3b)
  • simplify optionsMenu usage and fix tests (91241b7)
  • slot documentation (0ebd260)
  • split-button tests & lots of cleanup based on review feedback (10b4a04), closes #1189

0.4.1 (2021-03-05) #

Note: Version bump only for package @spectrum-web-components/split-button

0.4.0 (2021-03-04) #

Bug Fixes #

  • support a wider number of sizes (ee44978)

Features #

  • use latest exports specification (a7ecf4b)

0.3.4 (2021-02-19) #

Bug Fixes #

  • correct dependency graph (69165eb)

0.3.3 (2021-02-11) #

Bug Fixes #

  • update to latest spectrum-css packages (a5ca19f)

0.3.2 (2021-02-02) #

Note: Version bump only for package @spectrum-web-components/split-button

0.3.1 (2021-01-28) #

Note: Version bump only for package @spectrum-web-components/split-button

0.3.0 (2021-01-21) #

Bug Fixes #

  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use icons without "size" values (3fc7c91)
  • use latest @spectrum-css/* versions (c35eb86)

Features #

  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • use SixedMixin to manage "size" property (8819821)
  • action-button: add action button pattern (03ac00a)
  • button: use synthetic button instead of native (49e94bc)
  • split-button: update spectrum css input (7d83331)

0.2.0 (2021-01-13) #

Bug Fixes #

  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use icons without "size" values (3fc7c91)
  • use latest @spectrum-css/* versions (c35eb86)

Features #

  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • use SixedMixin to manage "size" property (8819821)
  • action-button: add action button pattern (03ac00a)
  • button: use synthetic button instead of native (49e94bc)
  • split-button: update spectrum css input (7d83331)

0.1.5 (2020-10-12) #

Note: Version bump only for package @spectrum-web-components/split-button

0.1.4 (2020-10-12) #

Note: Version bump only for package @spectrum-web-components/split-button

0.1.3 (2020-09-25) #

Note: Version bump only for package @spectrum-web-components/split-button

0.1.2 (2020-09-15) #

Note: Version bump only for package @spectrum-web-components/split-button

0.1.1 (2020-09-14) #

Bug Fixes #

  • split-button: test a11y correctly, find issues, fix them (4283994)

0.1.0 (2020-08-31) #

Bug Fixes #

  • split-button: follow visible tab order (966d3b6)
  • tags: support distant sibling selectors (a8dcf7f)

Features #

  • split-button: add split-button pattern (d3d8240)
  • update to Spectrum CSS v3.0.0 (e8b3d8f)
  • split-button: add split-button pattern (012b7f8)
  • split-button: add split-button pattern (4833a59)

Description #

An sp-split-button surfaces an immediately envokable action via it's main button, as well as a list of alternative actions in its toggleable menu overlay. By default, any actions envoked from the overlay will replace the main action button. When leveraging [type="more"] the action will be envoked, but the main button will remain the action initally persribed by the implementor.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/split-button

Import the side effectful registration of <sp-split-button> via:

import '@spectrum-web-components/split-button/sp-split-button.js';

The default of <sp-split-button> will load dependencies in @spectrum-web-components/overlay asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of <sp-split-button> as follows:

import '@spectrum-web-components/split-button/sync/sp-split-button.js';

When looking to leverage the SplitButton base class as a type and/or for extension purposes, do so via:

import { SplitButton } from '@spectrum-web-components/split-button';

Sizes #

Small 
<sp-split-button size="s">
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
 Medium 
<sp-split-button size="m">
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
 Large 
<sp-split-button size="l">
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
 Extra Large 
<sp-split-button size="xl">
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>

Variants #

CTA #

<sp-split-button>
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button left>
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>

Primary #

<sp-split-button variant="primary">
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button left variant="primary">
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>

Secondary #

<sp-split-button variant="secondary">
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button left>
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>

More button #

When using the more value of the type attribute, an <sp-split-button> will maintain its default option value without regard to the most recently used option.

CTA #

<sp-split-button type="more">
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button type="more" left>
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>

Primary #

<sp-split-button type="more" variant="primary">
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button type="more" left variant="primary">
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>

Secondary #

<sp-split-button type="more" variant="secondary">
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button type="more" left variant="secondary">
    <sp-menu-item>Option 1</sp-menu-item>
    <sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>