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.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
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 are less important in appearance than ordinary buttons, so their only sizes are normal and small.

import ButtonLink from "@kiwicom/orbit-components/lib/ButtonLink"
<Stack flex>
   <Stack shrink direction="column" spacing="condensed">
    <Heading type="title3">Type: Primary</Heading>
    <Heading type="title4">Normal</Heading>
    <ButtonLink>Add passenger</ButtonLink>
    <Heading type="title4">Small</Heading>
    <ButtonLink size="small">Add item</ButtonLink>
    </Stack>
  <Stack shrink direction="column" spacing="condensed">
    <Heading type="title3">Type: Secondary</Heading>
    <Heading type="title4">Normal</Heading>
    <ButtonLink type="secondary">Cancel</ButtonLink>
    <Heading type="title4">Small</Heading>
    <ButtonLink type="secondary" size="small">Edit passengers</ButtonLink>
  </Stack>
</Stack>
  # Use ButtonLink as standalone links

Use negative space around the buttons, so the layout communicates that text inside that space is clickable. In this case, the icon is not needed.

  # Don’t use ButtonLink in paragraphs

ButtonLink has a different height than one line in a paragraph, it would break the layout.

TextLink is great for this use case.