TextLink

If you’re unsure what component or type to use for actions, check out our interactive guide on action components.

• To make text inside paragraphs or lists actionable.
• To offer external navigation that doesn’t draw too much attention.
• To offer action text that’s long.

• For actions outside text related to the current screen or navigating within your app—use a button link.
• For a single action you want to draw attention to—use a button.

Text links work best for navigating users. They present a familiar pattern where users are used to being redirected to another part of your app or some place external.

For actions within the same screen, such as adding passengers, use a different action component, such as a button link.

It should be clear from the link text exactly what happens when the user interacts with it. The text can be actionable, such as “Read all reviews”, or descriptive of what’s described at the link, such as ”Kiwi.com Guarantee“.

The link stands out from the surrounding text. Its text is also used separately by screen readers to make the link accessible to everyone.

So it’s best if the link text makes sense out of context—just by looking at the text itself. Avoid text like “here” or many repetitions of “learn more”. Try to include nouns or specific details in the link itself.

Some examples of what to have and not have as the text within the link:

Text links are designed to go together with surrounding text. They inherit their basic characteristics from the parent so that they fit in. They’re also clearly aligned with other text to present a coherent whole.

If you need actions that stand alone, use button links.

Text links look much like surrounding text. If something unexpected happens on interaction, let users know. For example, use a new-window icon together with a clear label for screen readers to let users know a link opens in a new window/tab.

Text links inherit their default size from their parent. You can override this size.

Text links should align with the color of text around them. Usually, this means using the default primary color.

When the text link is part of or next to text with a different color, the text link can have its color align with other text. (It’s always darker to make it clear it has an action.)

Do not use different colors for standalone text links. The colors aren’t for emphasis or to draw attention.

The primary color of text links is colorTextLinkPrimary. This is a darker color than other primary actions, such as primary buttons.

The color for text links is darker so it has enough contrast with surrounding text.