Your bookmarks

Button

Displays a single important action a user can take.

Make it clear what users should do to continue with their main flow by using buttons to highlight the main actions they can take.

Prioritize the actions on a page and use the button sizes and types to make it clear to users which are the most important. If you have many actions, consider using button links to offer less important ones.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
Developing
Android (Kotlin)
Developing
Sketch
Released

Content structure

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

Guidelines

Identify the most important actions

“If everything looks important, then nothing is important.”

― Patrick Lencioni

Users need to be certain of what action to take next. You need to know which actions are the most important within a given section of the user flow.

Once you’ve identified which actions are the most important at the moment, you can indicate importance through size, type, and variation.

  # Have one primary action

Every screen should have only one button that represents the most important action – leading the user to the next step.

One primary button on a screen stands out.
Too many primary buttons confuse users.
  # Show importance hierarchy

If you have multiple actions on one screen, use different button types and sizes to show different levels of importance.

One primary button on a screen stands out.

Make the buttons actionable

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.

Avoid disabled buttons

Many designers want to show users that actions will be possible in the future, so they end up using disabled buttons to show potential actions. But such buttons often end up confusing users about what is possible.

Instead, try to focus on using progressive disclosure to show them only the actions they should take right at the moment. Then when it is possible for them to take action, you can show them more buttons.

If you need to use a disabled button, always make it clear how users can activate them.

Button combinations

All buttons have a specific size and type. Some of the combinations work better together, as you can see in the few specific uses below.

Basic buttons

Basic buttons come in three sizes (large, normal, and small) and two types (either primary or secondary).

Primary buttons are best for the single primary action on the screen. All remaining actions can be secondary buttons or another component.

import Button from "@kiwicom/orbit-components/lib/Button"
<Stack flex>
   <Stack shrink direction="column" spacing="condensed">
    <Heading type="title3">Type: Primary</Heading>
    <Heading type="title4">Large</Heading>
    <Button size="large">Continue to payment</Button>
    <Heading type="title4">Normal</Heading>
    <Button>Add passenger</Button>
    <Heading type="title4">Small</Heading>
    <Button size="small">Add item</Button>
    </Stack>
  <Stack shrink direction="column" spacing="condensed">
    <Heading type="title3">Type: Secondary</Heading>
    <Heading type="title4">Large</Heading>
    <Button type="secondary" size="large">Cancel</Button>
    <Heading type="title4">Normal</Heading>
    <Button type="secondary">Cancel</Button>
    <Heading type="title4">Small</Heading>
    <Button type="secondary" size="small">Edit passengers</Button>
  </Stack>
</Stack>
  # Use secondary small buttons for additional actions on the page

The secondary small button is great for actions in Cards as it stands out from the interface but doesn’t take so much attention.

  # Use secondary buttons for items in loop

If you have a repeated view, use the secondary button for their main action. Primary buttons would offer too many choices to select from.

  # Don’t use primary buttons to manipulate users

If there are more choices on one level (and it’s an essential step in the flow), all buttons should be primary.

Making one primary and the other secondary would be manipulating the user towards our preferred choice.

Buttons with icons

Buttons with icon are great when you need to draw more attention to the action. Icons add additional context and makes the buttons more easy to scan.

But it’s essential to not over-use these buttons. If everything is grabbing attention, things usually get messy.

import Button from "@kiwicom/orbit-components/lib/Button"
import ChevronRight from "@kiwicom/orbit-components/lib/icons/ChevronRight"
<Stack direction="column" spacing="loose">
  <Stack direction="column">
    <Heading type="title4" spaceAfter="small">With right icon</Heading>
    <Stack flex>
      <Button iconRight={<ChevronRight />}>Continue to payment</Button>
      <Button iconRight={<ChevronRight />}>Explore</Button>
    </Stack>
  </Stack>
  <Stack direction="column">
    <Heading type="title4" spaceAfter="small">With left icon</Heading>
    <Stack flex>
      <Button size="small" iconLeft={<PlusCircle />}>Add item</Button>
      <Button size="small" type="secondary" iconLeft={<Edit />}>Add item</Button>
    </Stack>
  </Stack>
</Stack>
  # Use a left icon when the button adds another item

For cases like this, it’s great to use an icon with a plus to represent the addition, such as PlusCircle or PassengerAdd.

  # Right icons should only be directional

They can help explain what happens when the user interacts with the button. It’s easier to see if the user will be taken elsewhere with an icon.

  # Add a label when using icon-only buttons

Even the simplest icons like plus can be understood in many different ways. To make sure your icon is accessible, add a proper label to communicate the purpose.

Special buttons

We use these special buttons for specific use cases and usually not in all available sizes.

Social buttons

We use social buttons only in a normal size. They’re used only for signing in.

import Button from "@kiwicom/orbit-components/lib/Button"
import Stack from "@kiwicom/orbit-components/lib/Button"
import Facebook from "@kiwicom/orbit-components/lib/icons/Facebook"
import Google from "@kiwicom/orbit-components/lib/icons/Google"
<Stack flex>
  <Button iconLeft={<Facebook />} type="facebook" bordered>Sign in with Facebook</Button>
  <Button iconLeft={<Google />} type="google" bordered>Sign in with Google</Button>
</Stack>

Status buttons

We use status buttons exclusively in Alert messages for supporting actions connected to the message. We only use small buttons.

import Button from "@kiwicom/orbit-components/lib/Button"
<Stack direction="row">
  <Stack shrink direction="column" spacing="condensed">
    <Heading type="title5">Type: Success</Heading>
    <Button size="small" type="success">Success</Button>
  </Stack>
  <Stack shrink direction="column" spacing="condensed">
    <Heading type="title5">Type: Info</Heading>
    <Button size="small" type="info">Info</Button>
  </Stack>
  <Stack shrink direction="column" spacing="condensed">
    <Heading type="title5">Type: Warning</Heading>
    <Button size="small" type="warning">Warning</Button>
  </Stack>
  <Stack shrink direction="column" spacing="condensed">
    <Heading type="title5">Type: Critical</Heading>
    <Button size="small" type="critical">Critical</Button>
  </Stack>
</Stack>

Button states

All of our buttons use a consistently defined set of states.

  • Hover – We change the background of a button to its :hover color.
  • Active – We scale down the button with the modifierScaleButtonActive design token and also change the background to its :active color.
  • Focus – The background stays same but we create a light blue border around the button.
  • Disabled – We change the button opacity with the opacityButtonDisabled design token. This deactivates all the states listed above. 

Related components

ButtonLink

Button links are great for displaying less important actions. They work outside of text to show actions without drawing a lot of attention. Because they’re less important, their size can only be normal or small.

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.