sp-split-button
Attributes and Properties #
disabled
disabled
boolean
false
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
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
type
type
SplitButtonTypes
'field'
value
value
string
''
variant
variant
ButtonVariants
'accent'
Slots #
default slot
tooltip
Events #
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 #
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 #
<sp-split-button size="s"> <sp-menu-item>Option 1</sp-menu-item> <sp-menu-item>Option Extended</sp-menu-item> </sp-split-button>
<sp-split-button size="m"> <sp-menu-item>Option 1</sp-menu-item> <sp-menu-item>Option Extended</sp-menu-item> </sp-split-button>
<sp-split-button size="l"> <sp-menu-item>Option 1</sp-menu-item> <sp-menu-item>Option Extended</sp-menu-item> </sp-split-button>
<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>