Links
Demo
API
Tag
| Name | Description |
|---|---|
<a>
|
Standard HTML tag, accepts content |
Classes
| Name | Description |
|---|---|
button.link
|
Applies link styles to button |
URL Schemes
Using the right scheme when setting a link's href enables convenient (and free) functionality for users. Use them!
| Scheme | Description |
|---|---|
mailto: |
Opens default mail app. Can optionally pre-fill subject and body. Learn more |
tel: |
Device will offer to call the given number. You must use this when displaying phone numbers! Learn more |
sms: |
Device will open messages app and optionally create a new text if phone numbers are provided. Learn more |
Guidelines
Accessibility and Inline links
Inline links must be styled with the text-underline util class, per UX specifications.
Use document fragments
When appropriate links should take the user directly to a document fragment, e.g. go to
<h2 id="jobs">Job openings</h2> via href="about-us#jobs, rather than leaving it
up to them to scroll and find it. This is a convenient feature of the web and should be used when possible.
When to open a new tab
Most links should take the user directly to that page. Generally, external links should open in new tabs and links where the user is likely comparing or multi-tasking should also open in a new tab.
Styling links as buttons
You can style links as buttons. Do this only when your button should be a real link, otherwise use a real button.
Styling buttons as links
You can also style a button to look like a text link. This is appropriate when you would otherwise have to put a
click handler on an <a>, which is not an accepted pattern.
Securing external links
Any link that opens a new non-Avalara page should use the "no opener" option to prevent undesired access to the
referring frame's window object. Secure these links like so
<a href="evilsite.com" rel="noopener" target="_blank">
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com