sw-ui-split-button

Pill-shaped icon button with an optional chevron dropdown — the atomic building block of <sw-ui-control-bar>’s mic / camera / speaker buttons.

1
<sw-ui-split-button icon="microphone">
2
  <button slot="menu">Mute</button>
3
  <button slot="menu">Settings</button>
4
</sw-ui-split-button>

Renders in two layouts:

• With a chevron menu (a slotted <sw-ui-dropup> or non-empty items): a unified pill split into a main click zone and a chevron click zone with a subtle divider — [ 🎤 | ▲ ]. Clicking the icon area fires the primary event; clicking the chevron opens the dropup.
• Without a chevron menu: a single pill button.

Two interaction modes are inferred from which slots have content:

• Toggle mode — both active and inactive slots are populated. Each click flips the active attribute and fires sw-split-button-toggle with the new state.
• Push mode — only the default slot is populated. Each click fires sw-split-button-click without toggling.

Class: SwUiSplitButton · Module: packages/web-components/src/components/UI/controls/sw-ui-split-button.ts

class: SwUiSplitButton, sw-ui-split-button

Fields

Attributes

CSS Properties

Slots

Events