Call HUD

The in-call bar: who you're talking to, a live timer, mute, hang up. Mount it permanently — it renders nothing while quiet.

Installation

npx shadcn@latest add @handset/call-hud

Usage

import { CallHUD } from "@/components/handset/call-hud";

// e.g. in your app shell, floating above everything:
<CallHUD softphone={softphone} className="fixed bottom-4 left-4 z-50" />

See it live on the Dialer page — place a demo call and the bar appears. It shows connecting/ringing/on-hold states, flips the mute button's appearance when muted, and disappears when the call ends. Inbound calls that are still ringing belong to IncomingCallToast, not the HUD.

Props

Props
PropTypeDefaultDescription
softphoneSoftphoneThe softphone instance.
formatNumber(e164: string) => stringUS formatterDisplay formatting for the remote number.
classNamestringMerged onto the bar — position it here.