CallCard

Call recording card with phone, status badge, playback progress and duration. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

Vue
import { UiCallCard } from '@ziyarago/ui/vue'

Status tones

IY
Ibrahim Yusuf
+966 50 123 4567
Answered
3 m 04 s
IY
Ibrahim Yusuf
+966 50 123 4567
Missed
3 m 04 s
IY
Ibrahim Yusuf
+966 50 123 4567
Voicemail
3 m 04 s
IY
Ibrahim Yusuf
+966 50 123 4567
Busy
3 m 04 s
IY
Ibrahim Yusuf
+966 50 123 4567
Declined
3 m 04 s
IY
Ibrahim Yusuf
+966 50 123 4567
Transferred
3 m 04 s
Vue
<UiCallCard
  name="Ibrahim Yusuf"
  phone="+966 50 123 4567"
  status="Answered"
  :duration="184"
  :progress="40"
 />

<UiCallCard
  name="Ibrahim Yusuf"
  phone="+966 50 123 4567"
  status="Missed"
  :duration="184"
  :progress="40"
 />

<UiCallCard
  name="Ibrahim Yusuf"
  phone="+966 50 123 4567"
  status="Voicemail"
  :duration="184"
  :progress="40"
 />

<UiCallCard
  name="Ibrahim Yusuf"
  phone="+966 50 123 4567"
  status="Busy"
  :duration="184"
  :progress="40"
 />

<UiCallCard
  name="Ibrahim Yusuf"
  phone="+966 50 123 4567"
  status="Declined"
  :duration="184"
  :progress="40"
 />

<UiCallCard
  name="Ibrahim Yusuf"
  phone="+966 50 123 4567"
  status="Transferred"
  :duration="184"
  :progress="40"
 />

Answered

IY
Ibrahim Yusuf
+966 55 123 4567
Answered
3 m 32 s
Vue
<UiCallCard
  name="Ibrahim Yusuf"
  phone="+966 55 123 4567"
  status="Answered"
  :progress="40"
  :duration="212"
 />

Missed

MS
Maryam Said
+998 90 555 1122
Missed
0 m 00 s
Vue
<UiCallCard
  name="Maryam Said"
  phone="+998 90 555 1122"
  status="Missed"
  :progress="0"
  :duration="0"
 />

Sizes

IY
Ibrahim Yusuf
+966 55 123 4567
Answered
3 m 32 s
IY
Ibrahim Yusuf
+966 55 123 4567
Answered
3 m 32 s
IY
Ibrahim Yusuf
+966 55 123 4567
Answered
3 m 32 s
IY
Ibrahim Yusuf
+966 55 123 4567
Answered
3 m 32 s
IY
Ibrahim Yusuf
+966 55 123 4567
Answered
3 m 32 s
Vue
<UiCallCard
  name="Ibrahim Yusuf"
  phone="+966 55 123 4567"
  status="Answered"
  :progress="40"
  :duration="212"
  size="xs"
 />

<UiCallCard
  name="Ibrahim Yusuf"
  phone="+966 55 123 4567"
  status="Answered"
  :progress="40"
  :duration="212"
  size="sm"
 />

<UiCallCard
  name="Ibrahim Yusuf"
  phone="+966 55 123 4567"
  status="Answered"
  :progress="40"
  :duration="212"
  size="md"
 />

<UiCallCard
  name="Ibrahim Yusuf"
  phone="+966 55 123 4567"
  status="Answered"
  :progress="40"
  :duration="212"
  size="lg"
 />

<UiCallCard
  name="Ibrahim Yusuf"
  phone="+966 55 123 4567"
  status="Answered"
  :progress="40"
  :duration="212"
  size="xl"
 />

API reference

Call recording card with status badge, a playback progress bar and duration.

Props

PropType and valuesDefaultDescription
namerequiredstring—Caller name.
phonestring—Phone number.
statusAnsweredMissedVoicemailBusyDeclined—Badge text. Known statuses (case-insensitive): Answered green, Missed and Declined red, Voicemail and Busy amber, Ringing blue. Any other value is neutral. The badge is hidden when empty.
statusTonesRecord<string, 'success' | 'danger' | 'warning' | 'info' | 'brand'>—Extra or overriding status to tone mapping, e.g. { "No answer": "warning" }.
progressnumber0Playback progress 0-100.
durationnumber—Duration in seconds.
durUnits{ m?: string; s?: string }'{ m: 'm', s: 's' }'Minute and second unit labels for the duration.
labels{ play?: string }—Override built-in English strings. play is the aria-label of the play button.
sizexssmmdlgxl'md'Scales padding, text and avatars.

Events

Vue: @name. React: onName.

playCalled with no arguments when the play button is clicked.