For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Log inSign up
Support
GuidesReferenceClick-to-Call
GuidesReferenceClick-to-Call
  • Core
    • Overview
  • Entities
    • SignalWire
    • Address
    • Participant
    • ClientPreferences
    • SelfCapabilities
    • SelfParticipant
    • User
    • WebRTCCall
  • Web Components
    • Overview
    • sw-audio-level
    • sw-call-controls
    • sw-call-dialpad
    • sw-call-media
    • sw-call-provider
    • sw-call-status
    • sw-call-widget
    • sw-click-to-call
    • sw-device-selector
    • sw-directory
    • sw-local-camera
    • sw-participant-controls
    • sw-participants
    • sw-self-media
    • sw-ui-alert
    • sw-ui-background
    • sw-ui-call-layout
    • sw-ui-content-drawer
    • sw-ui-control-bar
    • sw-ui-dialpad
    • sw-ui-dropup
    • sw-ui-icon
    • sw-ui-modal
    • sw-ui-responsive-container
    • sw-ui-split-button
    • sw-ui-transcript-view
LogoLogoSignalWire Docs
Log inSign up
Support
On this page
  • class: SwCallStatus, sw-call-status
  • Fields
  • call
  • Attributes
  • CSS Properties
  • CSS Parts
Web Components

sw-call-status

|View as Markdown|Open in Claude|
Was this page helpful?
Edit this page
Previous

sw-call-widget

Next
Built with

Compact status pill that mirrors the live call state plus a running duration timer once the call is connected.

1<sw-call-provider token="YOUR_GUEST_TOKEN">
2  <sw-call-status></sw-call-status>
3</sw-call-provider>

Subscribes to call.status$ (or to callStateContext.status when nested inside <sw-call-provider> / <sw-call-widget>) and renders three pieces of UI:

  1. A circular status indicator dot whose color/animation reflects the current state — pulsing yellow for connecting/ringing/trying/ recovering, solid green for connected, pulsing red for disconnecting, solid red for disconnected/failed, gray for new/destroyed.
  2. A status label, mapped from the SDK’s CallStatus enum to a human-readable string (“Connecting…”, “Ringing…”, “Connected”, …).
  3. A monospace M:SS (or H:MM:SS) duration counter that starts when the call enters connected and resets when it leaves.

Input precedence (most specific wins): .call > context. The label uses aria-live="polite" so screen readers are notified of state transitions without interrupting the user.

Class: SwCallStatus · Module: packages/web-components/src/components/sw-call-status.ts

class: SwCallStatus, sw-call-status

Fields

call
Call | undefined

Explicit Call — when set, subscribes directly to its observables and bypasses context.

Attributes

NameFieldInherited From
callcall

CSS Properties

NameDefaultDescription
--type-family-bodyFont family inherited from the design tokens.
--type-size-smallFont size for the label.
--radius-mdBorder radius of the container pill.
--fg-defaultDefault label color.
--bg-surface-raisedIndicator color in idle states (`new`, `destroyed`).
--interactive-status-successColor used while connected.
--interactive-status-warningColor used during connection / recovery.
--interactive-button-destructive-bgColor used for failure / disconnect states.

CSS Parts

NameDescription
containerOuter pill that wraps the indicator, label, and timer.
status-textThe text label (`role=“status”`, `aria-live=“polite”`).
durationThe running timer (only rendered while `connected`).