Split Button

<dsx-split-button> — Split Button

Primary action button paired with a lightweight dropdown of secondary actions.

Live Preview

Import

import '@bnotk/dsx/components/split-button.js';

Usage

<dsx-split-button label="Save" variant="primary">
  <dsx-split-option value="draft">Save draft</dsx-split-option>
  <dsx-split-option value="copy">Save as copy</dsx-split-option>
</dsx-split-button>

Elements

<dsx-split-button>

Main split-button wrapper with a primary button, a toggle button, and a dropdown menu.

Properties

Property	Type	Default	Description
label	string	”	Text label for the primary action button.
variant	’primary’ | ‘secondary'	'primary’	Switches between filled and outlined visual treatments.
disabled	boolean	false	Disables both button segments and closes pointer interaction.

Methods

None.

Events

Event	Detail	Description
dsx-click	—	Bubbles/composed when the primary action button is clicked.
dsx-option-select	{ value: string | null }	Bubbles/composed when a dsx-split-option is chosen.

Slots

Slot	Description
default	One or more <dsx-split-option> children rendered inside the dropdown menu.

CSS Parts

This element does not expose shadow parts.

Notes

• Opening the dropdown attaches a one-shot document click listener after the current task so outside clicks close the menu.
• The default slot has a click handler that resolves the nearest dsx-split-option with closest().

<dsx-split-option>

Simple block option used inside the split button dropdown.

Properties

Property	Type	Default	Description
value	string	”	Value returned in the dsx-option-select event detail.

Methods

None.

Events

None.

Slots

Slot	Description
default	Visible option label/content.

CSS Parts

This element does not expose shadow parts.

Notes

• The option itself does not dispatch events; the parent split button handles selection.

Behavior Notes

• The host is inline-flex and position: relative so the dropdown can be absolutely positioned to the right edge.
• Primary and toggle segments share a border radius split across left/right corners.
• The toggle button exposes aria-haspopup="true" and mirrors the _open state through aria-expanded.

Styling Notes

• Primary variant uses --ds2-color-main / --ds2-color-main-dark with white text.
• Secondary variant uses white background, inset border, and the main color for text and separator.
• Dropdown surface uses --ds2-color-white, --ds2-color-grey-2, and --ds2-shadow-md.