Components Phone number

Phone number

A displayed phone number with a one-tap dial affordance — the single way to surface a phone number in the Portal. Renders the number followed by a phone icon-button that is a native tel: link, handing off to the device dialer. Displayed numbers link out; the dedicated dial pad and call-history rows are the in-Portal ACS calling surfaces.

<koala-phone>

Canonical

07700 900123

<koala-phone number="@user.MobilePhoneNumber" />

The number renders as stored (national). The phone button is a tel: link, so the device dialer places the call.

Variants

2 variants

07700 900123

Number + dial button (default)

Icon only

icon-only

<koala-phone number="@contact.Mobile" icon-only />

Use icon-only in an action cluster where the number is already shown alongside (e.g. an email + call row on a contact card).

Props

3 attributes

Attribute	Values	Notes
number	string	The number to display and dial. Blank → renders nothing (safe to drop in unconditionally).
icon-only	bool	Render only the dial button, no number text. Defaults to false.
size	IconSize	Icon size for the dial button. Defaults to Small.

Do & don't

07700 900123

Do Use koala-phone wherever a phone number is shown — one component owns the display + the tel: dial affordance.

Don't Don't hand-roll a tel: link + icon-button per page. That drift is exactly what this helper replaces.