> Fetch clean Markdown by appending `.md` to any page URL under https://signalwire.com/docs or requesting it with the HTTP header `Accept: text/markdown`. The root index at https://signalwire.com/docs/llms.txt lists the available documentation indexes.

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

```html
<sw-ui-split-button icon="microphone">
  <button slot="menu">Mute</button>
  <button slot="menu">Settings</button>
</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

**`items`** `Array<DropUpItem | string>` — default: \[]

`items` field.

---

**`active`** `boolean` — default: false

`active` field.

---

**`disabled`** `boolean` — default: false

Renders the button inert: the main (or solo) button gets the native `disabled` attribute, hover styling is suppressed, and clicks fire no event. The chevron zone is unaffected.

---

### Attributes

| Name       | Field    | Inherited From |
| ---------- | -------- | -------------- |
| `active`   | active   |                |
| `disabled` | disabled |                |
| `items`    | items    |                |

### CSS Properties

| Name                         | Default | Description                                        |
| ---------------------------- | ------- | -------------------------------------------------- |
| `--sw-split-button-size`     |         | \[44px] - Button height (width auto-fits content). |
| `--sw-split-button-bg`       |         | \[var(--bg-surface)] - Button background.          |
| `--sw-split-button-bg-hover` |         | \[var(--bg-surface-raised)] - Hover background.    |
| `--sw-split-button-color`    |         | \[var(--fg-default)] - Icon color.                 |
| `--sw-split-button-radius`   |         | \[var(--radius-full)] - Border radius.             |

### Slots

| Name       | Description                                                               |
| ---------- | ------------------------------------------------------------------------- |
| `active`   | Icon shown when \`active\` is \`true\` (toggle mode).                     |
| `inactive` | Icon shown when \`active\` is \`false\` (toggle mode).                    |
|            | Default slot used by push-mode buttons (no \`active\`/\`inactive\` slot). |
| `dropup`   | Optional \`\<sw-ui-dropup>\` to enable the chevron menu.                  |

### Events

| Name                     | Detail | Description                                     |
| ------------------------ | ------ | ----------------------------------------------- |
| `sw-split-button-click`  | —      | Fired in push mode after each click. No detail. |
| `sw-split-button-toggle` | —      | Fired in toggle mode after each click.          |

---