IncomingCall

Floating incoming call banner with decline and answer buttons. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

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

Default

IY
Incoming call
Ibrahim Yusuf
+966 55 123 4567
Vue
<UiIncomingCall name="Ibrahim Yusuf" phone="+966 55 123 4567" />

Custom label

MS
Callback request
Maryam Said
+998 90 555 1122
Vue
<UiIncomingCall
  label="Callback request"
  name="Maryam Said"
  phone="+998 90 555 1122"
 />

Sizes

IY
Incoming call
Ibrahim Yusuf
+966 55 123 4567
IY
Incoming call
Ibrahim Yusuf
+966 55 123 4567
IY
Incoming call
Ibrahim Yusuf
+966 55 123 4567
IY
Incoming call
Ibrahim Yusuf
+966 55 123 4567
IY
Incoming call
Ibrahim Yusuf
+966 55 123 4567
Vue
<UiIncomingCall name="Ibrahim Yusuf" phone="+966 55 123 4567" size="xs" />

<UiIncomingCall name="Ibrahim Yusuf" phone="+966 55 123 4567" size="sm" />

<UiIncomingCall name="Ibrahim Yusuf" phone="+966 55 123 4567" size="md" />

<UiIncomingCall name="Ibrahim Yusuf" phone="+966 55 123 4567" size="lg" />

<UiIncomingCall name="Ibrahim Yusuf" phone="+966 55 123 4567" size="xl" />

API reference

Glass banner for an incoming call with Decline and Answer buttons.

Props

PropType and valuesDefaultDescription
namerequiredstring—Caller name.
phonestring—Caller number.
labelstring'Incoming call'Caption above the name.
onDecline() => void—Decline button click.
onAnswer() => void—Answer button click.
sizexssmmdlgxl'md'Scales padding, text and avatars.

Events

Vue: @name. React: onName.

declineDecline button clicked.
answerAnswer button clicked.