CallSurface

A voice call screen: wave, avatar, name, status, caption, call buttons.

Group: Media · Kind: macro

Preview

state · ringing

AAssistantCalling…

Cancel

state · talking

AAssistant01:24Sure, Friday at eight works. Shall I book it?

MuteMute

SpeakerSpeaker

End callEnd call

muted · true

AAssistant03:10

UnmuteUnmute

End callEnd call

Open in the playground

Platforms

The same specimen painted by React, SwiftUI, Compose and gpui.

Variants

state · connecting

AAssistantCalling…Sure, Friday at eight works.

MuteMute

End callEnd call

state · ended

AAssistantCalling…Sure, Friday at eight works.

MuteMute

End callEnd call

activity · idle

AAssistantCalling…Sure, Friday at eight works.

Cancel

activity · listening

AAssistantCalling…Sure, Friday at eight works.

Cancel

activity · thinking

AAssistantCalling…Sure, Friday at eight works.

Cancel

activity · muted

AAssistantCalling…Sure, Friday at eight works.

Cancel

speaker

AAssistantCalling…Sure, Friday at eight works.

Cancel

Props

Prop	Type	Required	Bindable	Description
name	string	yes	yes	Who is on the call.
avatar	url	–	yes	Picture URL.
state	ringing | connecting | talking | ended	–	yes	ringing: Cancel only. Default "talking".
activity	idle | listening | thinking | speaking | muted	–	yes	The wave when talking. Default "speaking".
level	number	–	yes	Level 0 to 1.
bands	[number]	–	yes	Band levels.
status	string	–	yes	Calling… or a timer.
caption	string	–	yes	The live line.
muted	boolean	–	yes	Mic off; bind it. Default false.
speaker	boolean	–	yes	Shows the speaker toggle.

Events

• on.mute: runs an action
• on.speaker: runs an action
• on.hangUp: runs an action

Slots

None.

Children

none

A2UI basic mapping

No basic catalog component maps here.

Built from

Avatar · Box · Button · Icon · Text · Tooltip · VoiceWave

Accessibility

Role: group

group labelled by name; the wave is hidden, the caption a polite live region; mute and speaker are toggle buttons (aria-pressed), every round button labelled by its tooltip text

Keys	Action
–	Tab reaches mute, speaker, end in order
Enter Space	press

Theming

Recipe parts: CallSurface/root CallSurface/head CallSurface/wave CallSurface/avatar CallSurface/name CallSurface/status CallSurface/caption CallSurface/spacer CallSurface/controls CallSurface/muteTip CallSurface/mute CallSurface/muteIcon CallSurface/speakerTip CallSurface/speaker CallSurface/speakerIcon CallSurface/endTip CallSurface/end CallSurface/endIcon CallSurface/cancel CallSurface/cancelLabel

Keyed by: state muted :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover

Themes · Write a theme

Related

Avatar · Button · Icon · Text · Tooltip · VoiceWave · Image · ZoomableImage