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

ButtonLink

Displays a single, less important action a user can take.

If all potential actions on a page seem equally important, users will have a hard time figuring out what to do first. Offer users less important or less common actions using button links. Also choose them when there’s only one action but it’s very low in importance (like a delete button on a profile).

Button links work like buttons but without the initial styling. So you have to make sure it’s clear from context that it involves an action.

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

IconLeft: visually supports button visability; label: describes the main action and works best when short; icon right: shows additional options for the button (expandable, link, etc.).

ButtonLink types

Button links come in the three types (primary, secondary, and critical) and three sizes (large, normal, and small).

import ButtonLink from "@kiwicom/orbit-components/lib/ButtonLink";
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">Type: Primary</Heading>
      <ButtonLink>Add passenger</ButtonLink>
    </Stack>
    <Stack shrink direction="column" spacing="XSmall">
      <Heading type="title3">Type: Secondary</Heading>
      <ButtonLink type="secondary">Cancel</ButtonLink>
    </Stack>
    <Stack shrink direction="column" spacing="XSmall">
      <Heading type="title3">Type: Critical</Heading>
      <ButtonLink type="critical">Cancel</ButtonLink>
    </Stack>
  </Stack>
)

All of these types can be inline, which takes away their side padding and makes only their foreground (not the background) change on hover. Inline button links are great for uses similar to text links but outside of text. Inside text, use only text links.

import ButtonLink from "@kiwicom/orbit-components/lib/ButtonLink";
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 BaggageCabin from "@kiwicom/orbit-components/lib/icons/BaggageCabin";
() => (
  <Stack direction="column" spacing="condensed">
    <Heading as="h3" type="title3">
      Baggage
    </Heading>
    <Stack flex spacing="condensed">
      <BaggageCabin />
      <Stack direction="column" basis="160px" spacing="extraTight">
        <Text>Cabin bag</Text>
        <Text type="secondary">65 × 45 × 25 cm, 10 kg</Text>
      </Stack>

      <Stack direction="column" spacing="none">
        <Text>$16.48</Text>
        <ButtonLink type="inline" compact>
          Change
        </ButtonLink>
      </Stack>
    </Stack>
  </Stack>
)

Guidelines               

Use actionable text

It should be clear from the button text exactly what will happen when the user interacts with it. The labels should be actionable, such as “Add passenger” and “Book for (price)”.

Avoid long explanations in the button text. The text should be short and clear. If additional explanation is needed, add it above the button as text.

See examples for how to make actions clear.

Use apart from text

Button links have extra spacing built into them so that they present a large enough target size to be usable on smaller screens. So they have different heights than text and using them in a paragraph would cause visual misalignment. 

Use button links only as stand-alone elements. The extra space around them also helps show they’re connected to an action. If you need links aligned with text, use text links.

Look & feel

Mobile vs. desktop size

While your first instinct on mobile devices might be to use smaller buttons and button links to take up less valuable space, this actually creates some issues. For example, placing a small button on one side of the screen makes it much harder to access for people using one hand (a button on the right is hard for left-handers to access).

Also, without clues like hover states, interactions in mobile devices are harder for users to guess.

So on small screens buttons and button links should take up the full width. This makes them easy to access and hard to miss.

On wider screens where users are unlikely to be using only one hand and are used to hovering to find interactions, buttons and button links can fit the size of their content.

Related components

Button

Button links are great for displaying less important actions or when you have multiple actions on the same screen (so they don’t become overwhelming). If you have a single action you want to draw attention to, use a button.

TextLink

Text links are great for making text inside paragraphs or lists actionable. They line up directly with other text and show potential actions without disrupting the main user flow.