Web Components

sw-ui-control-bar

View as MarkdownOpen in Claude

Call controls bar.

1<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
booleanDefaults to false

micMuted field.

cameraMuted
booleanDefaults to false

cameraMuted field.

speakerMuted
booleanDefaults to false

speakerMuted field.

fullscreen
booleanDefaults to false

fullscreen field.

screenSharing
booleanDefaults to false

screenSharing field.

handRaised
booleanDefaults to false

handRaised field.

transcriptActive
booleanDefaults to false

transcriptActive field.

showScreenShare
booleanDefaults to false

showScreenShare field.

showHandRaise
booleanDefaults to false

showHandRaise field.

showTranscript
booleanDefaults to false

showTranscript field.

showSettings
booleanDefaults to false

showSettings field.

showFullscreen
booleanDefaults to true

showFullscreen field.

micDevices
DropUpItem[]Defaults to []

micDevices field.

cameraDevices
DropUpItem[]Defaults to []

cameraDevices field.

speakerDevices
DropUpItem[]Defaults to []

speakerDevices field.

settingsItems
DropUpItem[]Defaults to []

settingsItems field.

Attributes

NameFieldInherited From
mic-mutedmicMuted
camera-mutedcameraMuted
speaker-mutedspeakerMuted
fullscreenfullscreen
screen-sharingscreenSharing
hand-raisedhandRaised
transcript-activetranscriptActive
show-screen-shareshowScreenShare
show-hand-raiseshowHandRaise
show-transcriptshowTranscript
show-settingsshowSettings
show-fullscreenshowFullscreen

CSS Properties

NameDefaultDescription
--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-bghang-up background (falls back to —interactive-button-destructive-bg)
--sw-control-bar-hangup-bg-hoverhang-up hover bg (falls back to —interactive-button-destructive-hover)
--sw-control-bar-hangup-colorhang-up icon colour (defaults to #fff) The active-toggle variant uses —interactive-button-primary-{bg,hover,text} from the design tokens.

Events

NameDetailDescription
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——