Sometimes you want text that is actionable but not as attention-grabbing as a button. Maybe it sits inside a paragraph of text. Maybe you want navigation with explanatory text.
Text links let you add actions in the form of text that fits with its surroundings. Users can see they can take an action, but their focus is not drawn too far from your main flow.
If you’re unsure what component or type to use for actions, check out our interactive guide on action components.
Component status
Figma
Web (React)
iOS (Swift)
Android (Kotlin)
DocsContent structure
TextLink types
Text links come in two types (primary and secondary) and three sizes (small, normal, and large).
import TextLink from "@kiwicom/orbit-components/lib/TextLink";
import Heading from "@kiwicom/orbit-components/lib/Heading";
import Stack from "@kiwicom/orbit-components/lib/Stack";() => (
<Stack flex>
<Stack shrink direction="column" spacing="XSmall">
<Heading type="title3" as="h3">
Primary
</Heading>
<TextLink href="https://orbit.kiwi">Orbit design system</TextLink>
</Stack>
<Stack shrink direction="column" spacing="XSmall">
<Heading type="title3" as="h3">
Secondary
</Heading>
<TextLink type="secondary" href="https://orbit.kiwi">
Orbit design system
</TextLink>
</Stack>
</Stack>
)
import Heading from "@kiwicom/orbit-components/lib/Heading";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";
import TextLink from "@kiwicom/orbit-components/lib/TextLink";() => (
<Stack direction="column">
<Heading type="title3" as="h3">
Inherited
</Heading>
<Stack flex>
<Stack>
<Heading type="title4" as="h4">
Small
</Heading>
<Text size="small">
Find out more about the{" "}
<TextLink href="https://orbit.kiwi">Orbit design system</TextLink>.
</Text>
</Stack>
<Stack>
<Heading type="title4" as="h4">
Normal
</Heading>
<Text size="normal">
Find out more about the{" "}
<TextLink href="https://orbit.kiwi">Orbit design system</TextLink>.
</Text>
</Stack>
<Stack>
<Heading type="title4" as="h4">
Large
</Heading>
<Text size="large">
Find out more about the{" "}
<TextLink href="https://orbit.kiwi">Orbit design system</TextLink>.
</Text>
</Stack>
</Stack>
<Stack direction="column">
<Heading type="title3" as="h3">
Explicit
</Heading>
<Stack flex>
<Stack>
<Heading type="title4" as="h4">
Small
</Heading>
<TextLink size="small" href="https://orbit.kiwi">
Orbit design system
</TextLink>
</Stack>
<Stack>
<Heading type="title4" as="h4">
Normal
</Heading>
<TextLink size="normal" href="https://orbit.kiwi">
Orbit design system
</TextLink>
</Stack>
<Stack>
<Heading type="title4" as="h4">
Large
</Heading>
<TextLink size="large" href="https://orbit.kiwi">
Orbit design system
</TextLink>
</Stack>
</Stack>
</Stack>
</Stack>
)
Guidelines
Use for navigation
Text links work best for navigating users. They present a familiar pattern where users will be 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.
Make actions clear
It should be clear from the link text exactly what will happen when the user interacts with it. The text can be actionable, such as “Read all reviews”, or descriptive of what will be described at the link, such as “Kiwi.com Guarantee”.
The link will stand 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:
Use only with text
Text links are designed to go together with surrounding text. They inherit their basic characterics from the parent so that they will easily 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.
Show unexpected results
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 will open in a new window/tab.
import TextLink from "@kiwicom/orbit-components/lib/TextLink";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import ChevronRight from "@kiwicom/orbit-components/lib/icons/ChevronRight";() => (
<Stack flex>
<TextLink
href="https://orbit.kiwi"
external
iconRight={<NewWindow ariaLabel="Opens in new window" />}
>
Orbit design system
</TextLink>
<TextLink iconRight={<ChevronRight />}>Skip this step</TextLink>
</Stack>
)
Look & feel
Sizing
Text links inherit their default size from their parent.
Color
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 will always be darker to make it clear it has an action.)
Do not use different colors for standalone text links. The colors are not for emphasis or to draw attention.
Primary color
The primary color of text links is Palette / Dark. This is a darker color than other primary actions, such as primary buttons.
The color for text links is darker so it will have enough contrast with surrounding text.
Related components
ButtonLink
Text links are great for making text inside paragraphs or lists into navigation. For actions outside the text that relate to the current screen, use button links.
Button
Text links work well for navigation and other smaller actions and multiple text links don’t overwhelm users. If you have a single action you want to draw attention to, use a button.