Koala logo Design
No matches for “
↑↓ navigate open Esc close
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; pressing it opens the softphone and rings the number over ACS. The dial button only appears when calling is available for the viewer (ViewData["CallingAvailable"]); otherwise it degrades to a tel: link so the number stays actionable.

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

The number renders as stored (national). Pressing the phone button dials it over ACS — the server normalises to E.164, so 07… is fine.

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).

2 states

The affordance depends on whether calling is available for the viewer (ViewData["CallingAvailable"]).

07700 900123
Calling available
the phone button dials over ACS
07700 900123
Calling unavailable
degrades to a tel: link

Non-calling users and the brochure sites (which never set the flag) get the tel: link, so the number stays actionable.

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.
07700 900123
Do Use koala-phone wherever a phone number is shown — one component owns the display + dial affordance + calling-availability gating.
Don't Don't hand-roll a tel: link + icon-button per page. That drift is exactly what this helper replaces, and it can't offer ACS dialling.