Developer mode
Opens components on the React tab by default.
Your bookmarks

TextLink

Makes text in paragraphs actionable.

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
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Content structure

Text: describes the link purpose and works best when short; icon: optionally visually supports the link.

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:

Guidelines
Orbit design system
Learn more
Click here
Read more about the Orbit design system
Learn more.

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. 

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.