CallRow

One-line call log entry with avatar, status, duration in seconds and a play button. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

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

Localized duration units (durUnits)

IY
Ibrahim Yusuf
Answered · 3 min 04 sec
Vue
<UiCallRow
  name="Ibrahim Yusuf"
  status="Answered"
  :duration="184"
  :dur-units="{ m: 'min', s: 'sec' }"
 />

Log

IY
Ibrahim Yusuf
Answered · 3 m 04 s
MS
Maryam Said
Missed · 0 m 00 s
Vue
<UiCallRow name="Ibrahim Yusuf" status="Answered" :duration="184" />

<UiCallRow name="Maryam Said" status="Missed" :duration="0" />

Sizes

IY
Ibrahim Yusuf
Answered · 3 m 04 s
IY
Ibrahim Yusuf
Answered · 3 m 04 s
IY
Ibrahim Yusuf
Answered · 3 m 04 s
IY
Ibrahim Yusuf
Answered · 3 m 04 s
IY
Ibrahim Yusuf
Answered · 3 m 04 s
Vue
<UiCallRow
  name="Ibrahim Yusuf"
  status="Answered"
  :duration="184"
  size="xs"
 />

<UiCallRow
  name="Ibrahim Yusuf"
  status="Answered"
  :duration="184"
  size="sm"
 />

<UiCallRow
  name="Ibrahim Yusuf"
  status="Answered"
  :duration="184"
  size="md"
 />

<UiCallRow
  name="Ibrahim Yusuf"
  status="Answered"
  :duration="184"
  size="lg"
 />

<UiCallRow
  name="Ibrahim Yusuf"
  status="Answered"
  :duration="184"
  size="xl"
 />

API reference

One-line call log row with avatar, status, duration and a play button.

Props

PropType and valuesDefaultDescription
namerequiredstring—Caller name.
statusstring—Status text before the duration, e.g. "Answered".
durationnumber—Duration in seconds, formatted as "3 m 05 s" (units from durUnits); shows a dash when missing.
durUnits{ m?: string; s?: string }'{ m: 'm', s: 's' }'Minute and second unit labels for localized durations, e.g. { m: "min", s: "sec" }.
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.