> 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-control-bar

Call controls bar.

```html
<sw-ui-control-bar></sw-ui-control-bar>
```

Buttons rendered (left to right): mic, camera, speaker, screen share,
hand raise, transcript, fullscreen, hang-up. Optional buttons are hidden
when their `show*` property is false.

*Class: `SwUiControlBar` · Module: `packages/web-components/src/components/UI/controls/sw-ui-control-bar.ts`*

## class: `SwUiControlBar`, `sw-ui-control-bar`

### Fields

**`micMuted`** `boolean` — default: false

`micMuted` field.

---

**`cameraMuted`** `boolean` — default: false

`cameraMuted` field.

---

**`speakerMuted`** `boolean` — default: false

`speakerMuted` field.

---

**`fullscreen`** `boolean` — default: false

`fullscreen` field.

---

**`screenSharing`** `boolean` — default: false

`screenSharing` field.

---

**`screenShareBusy`** `boolean` — default: false

A screen-share start or stop is in flight — the screen-share control is rendered disabled and ignores clicks until it settles.

---

**`handRaised`** `boolean` — default: false

`handRaised` field.

---

**`transcriptActive`** `boolean` — default: false

`transcriptActive` field.

---

**`showScreenShare`** `boolean` — default: false

`showScreenShare` field.

---

**`showHandRaise`** `boolean` — default: false

`showHandRaise` field.

---

**`showTranscript`** `boolean` — default: false

`showTranscript` field.

---

**`showSettings`** `boolean` — default: false

`showSettings` field.

---

**`showFullscreen`** `boolean` — default: true

`showFullscreen` field.

---

**`micDevices`** `DropUpItem[]` — default: \[]

`micDevices` field.

---

**`cameraDevices`** `DropUpItem[]` — default: \[]

`cameraDevices` field.

---

**`speakerDevices`** `DropUpItem[]` — default: \[]

`speakerDevices` field.

---

**`settingsItems`** `DropUpItem[]` — default: \[]

`settingsItems` field.

---

### Attributes

| Name                | Field            | Inherited From |
| ------------------- | ---------------- | -------------- |
| `mic-muted`         | micMuted         |                |
| `camera-muted`      | cameraMuted      |                |
| `speaker-muted`     | speakerMuted     |                |
| `fullscreen`        | fullscreen       |                |
| `screen-sharing`    | screenSharing    |                |
| `screen-share-busy` | screenShareBusy  |                |
| `hand-raised`       | handRaised       |                |
| `transcript-active` | transcriptActive |                |
| `show-screen-share` | showScreenShare  |                |
| `show-hand-raise`   | showHandRaise    |                |
| `show-transcript`   | showTranscript   |                |
| `show-settings`     | showSettings     |                |
| `show-fullscreen`   | showFullscreen   |                |

### CSS Properties

| Name                               | Default | Description                                                                                                                                       |
| ---------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--sw-control-bar-bg`              |         | \[transparent]             - bar background                                                                                                       |
| `--sw-control-bar-padding`         |         | \[8px 16px]                - bar padding                                                                                                          |
| `--sw-control-bar-gap`             |         | \[8px]                     - gap between buttons                                                                                                  |
| `--sw-control-bar-radius`          |         | \[0]                       - bar border-radius                                                                                                    |
| `--sw-split-button-size`           |         | \[44px]                    - button width & height                                                                                                |
| `--sw-split-button-bg`             |         | \[rgba(255,255,255,0.12)]  - button background                                                                                                    |
| `--sw-split-button-bg-hover`       |         | \[rgba(255,255,255,0.22)]  - button hover bg                                                                                                      |
| `--sw-split-button-color`          |         | \[#fff]                    - icon colour                                                                                                          |
| `--sw-split-button-radius`         |         | \[9999px]                  - button border-radius                                                                                                 |
| `--sw-control-bar-hangup-bg`       |         | hang-up background       (falls back to --interactive-button-destructive-bg)                                                                      |
| `--sw-control-bar-hangup-bg-hover` |         | hang-up hover bg          (falls back to --interactive-button-destructive-hover)                                                                  |
| `--sw-control-bar-hangup-color`    |         | hang-up icon colour       (defaults to #fff) The active-toggle variant uses --interactive-button-primary-\{bg,hover,text} from the design tokens. |

### Events

| Name                     | Detail                      | Description                           |
| ------------------------ | --------------------------- | ------------------------------------- |
| `sw-call-hangup`         | —                           | Hang-up button clicked. No detail.    |
| `sw-camera-toggle`       | `{ muted: boolean }`        | Camera toggled                        |
| `sw-device-change`       | `{ kind, deviceId, label }` | Device picked from a chevron menu     |
| `sw-fullscreen-toggle`   | `{ fullscreen: boolean }`   | Fullscreen toggled                    |
| `sw-hand-raise-toggle`   | `{ raised: boolean }`       | Hand raise toggled                    |
| `sw-mic-toggle`          | `{ muted: boolean }`        | Mic toggled                           |
| `sw-screen-share-toggle` | `{ active: boolean }`       | Screen share toggled                  |
| `sw-settings-change`     | `{ settingId: string }`     | Settings menu item picked             |
| `sw-speaker-toggle`      | `{ muted: boolean }`        | Speaker toggled                       |
| `sw-transcript-toggle`   | —                           | Transcript button clicked. No detail. |
| `type`                   | —                           | —                                     |

---