sp-split-button

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

NPM

0.42.2

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API

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. 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

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>