Components / Data & content

Phone Number

Component + manager

Displays a phone number with an optional button to initiate a call. Combines country code and main number, and handles dialing via a clickable button.

Preview
Usage
API reference

Live preview

Interactive example

Contact details

+1 202 555 0142

A readable number with a native call action.

Usage

Import the component and its manager, then make it your own.

ComponentPhoneNumber
Managercreate_phone_number_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { PhoneNumber, create_phone_number_manager } from "sveltekit-ui"

  const manager = create_phone_number_manager({ val: "+12025550123" })
</script>

<PhoneNumber {manager} />

API reference

Configure the manager, call its methods, and read its reactive state.

3 entries in configuration

PropertyTypeDefaultDescription
valobject or string or null nullInitial phone number value. If an object, should include `country_code` and `main_number`. If a string, treated as the full phone number.
main_numberstring or null nullThe main part of the phone number without the country code.
country_codestring or null nullThe country code part of the phone number (e.g., '+1').