Components

Text link

A text link is a stylized element of text that is linked to another resource

Overview

  • Available since: New York
  • A11Y: WCAG 2.1 AA

Text link is an interactive text element that serves as a navigation. It allows users to access additional information or navigate to different sections.

ServiceNow link
Text link code documentation

UIB and developer guidance

Figma link
Text link Figma component

Horizon components and styles library

Loading playground

When to use

Use text link to provide clear and concise calls to action within text content. It is suitable for linking to related pages, external resources, or without the need for a button.

When not to use

Don’t use text link for critical actions that cause changes within the UI, or manipulate data. For important and potentially risky actions, use buttons instead.

Anatomy

Text Link Anatomy
  1. Icon before (optional): You can place an icon at the beginning of the label; the icon size is proportional to the label size
  2. Label: A string of linked text that describes the intent of the link
  3. Underline (optional): A way to provide extra visual emphasis on a text link
  4. Icon after (optional): You can place an icon at the end of the label; the icon size is proportional to the label size

Subcomponents

See usage guidance for button

See usage guidance for alert

Usage

Use text link within the content in the display or within other components to direct a user to another page or area.

Avoid using a text link to encourage an action, cause a change in the UI, or manipulate data. For these types of interactions, use the button component instead.

Variants

Learn about the variants of text link.

Types

Text link has the following different variants: primary and secondary.

Primary

Use the primary variant except for when it doesn't comply with WCAG 2 AA standards.

Text Link Primary Variant

Secondary

Use the secondary variant when the primary style doesn't meet WCAG 2 AA contrast and color requirements on backgrounds with color.

Text Link Secondary Variant

Configurations

Learn how to customize text link by configuring the available properties

Icon start

If defined, icon start specifies the icon to display at the start of the label. For valid inputs, see usage guidelines for icon.

Text Link Secondary Variant

Icon end

If defined, icon end specifies the icon to display at the end of the label. For valid inputs, see usage guidelines for icon.

Text Link Secondary Variant

Alert messages

You can configure a text link within an alert to provide context to the alert message.

Text Link Alert Message

In this example, the case number within the alert message is a text link that takes the user to the case.

List

Configure a text link in a list to provide additional context to an individual list item.

List

In this example, the list displays case numbers as text links. A user can select one of the text links to get more detailed information for that specific case. These text links aren't underlined to reduce visual distraction.

Design recommendations

Learn how to apply text link in your design.

List
Do

Underline a text link when you want to get the user's attention. If they’re part of a long list, use the text link without underline.

Complex
Don’t

Avoid underlining text links if they're part of a long list because it creates an unnecessary visual distraction.

UI text guidelines

Consider these recommendations for labeling a text link:

  • Keep labels short. Long labels make the linked words hard to read.
  • Use verbs for text links. Verbs give the reader a direct call to do something.
  • Avoid generic labels. By using a specific label, you help people understand where a link goes.
    • For example, “View record” tells the user where the link will go and what they will view
  • If you need to use a generic link like “Learn more” due to limited space, remember to provide alt text to tell screen readers where the link goes. Remember to also include the visible label in the alt text as well.

Behavior

Learn how text link behaves when the display changes or a user interacts with the component.

States

Text link has the following states: default, hover, and pressed. The color of a text link changes between states. If the text link includes an underline, each state will also include the underline styling.

State Primary Secondary
Default now-text-link now-text-link
Hover now-text-link now-text-link
Pressed now-text-link now-text-link

Responsive behaviors

If a text link wraps, the link style also wraps with it.

wrap

Without underline

wrap underline

With underline

Usability

Text link complies with all internationalization and accessibility requirements.

Accessibility

Keyboard interactions

  • Tab: Shifts focus to the link
  • Enter: Launches the link and moves focus to the link target

Forced colors

Text link supports the use of Forced Colors, most commonly activated through Windows high contrast themes.