Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Telephone

Use: Best practice
The telephone component captures the many variations of phone numbers displayed on VA.gov.

By default, va-telephone components are clickable with a link and accept a value of 3 or 10 digits, however, props can be added to provide them with an extension, make them non-clickable, and have an international phone number indicator.

The va-telephone component also follows the guidelines set for phone numbers.

Examples

Default

See this in Storybook

Three Digit Number

See this in Storybook

Extension

See this in Storybook

Not Clickable

See this in Storybook

International

See this in Storybook

Aria Described By

See this in Storybook

TTY

See this in Storybook

Vanity Number

See this in Storybook

Usage

When to use va-telephone

  • When a phone number is to be shown on a page.

When to consider something else

  • The link text is not a phone number.

How to use va-telephone

  • Add a 3 or 10 digit phone number to the component to have it formatted correctly for usage in a page.
  • If the phone number should have an extension, be non-clickable, or represent an international number, additional props can be added to accommodate.
  • For TTY numbers, pass the tty boolean prop to have appropriate indicators in the link text and the aria-label.

Code usage

Attributes and Properties

Property Attribute Type Default Description
contact contact string 3 or 10 digit string representing the contact number
extension extension number Optional phone number extension
international international boolean false Indicates if this is a number meant to be called from outside the US. Prepends a "+1" to the formatted number.
notClickable not-clickable boolean false Indicates if the phone number can be clicked or not
tty tty boolean false Indicates if this is a number meant to be called from a teletypewriter for deaf users.
vanity vanity string Optional vanity phone number. Replaces the last 4 digits with the vanity text input

Events

Name Description
component-library-analytics The event used to track usage of the component. This is emitted when clicking on an anchor link.

Accessibility considerations

  • By default an aria-label will be created based off of the context entered into the component and will be formatted as a combined phone number parts within the label separated by periods, e.g. “800-555-1212” becomes “8 0 0. 5 5 5. 1 2 1 2”
  • If the non-clickable prop is enabled aria-hidden="true" will be added to the span element containing the number and a sr-only css class will be added to the span element displaying the number in the aria-label format as shown above.
Edit this page in GitHub (Permissions required)
Last updated: Jul 27, 2022