Button

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.

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

Sketch

Released

Content structure

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.

  # Show importance hierarchy

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

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.

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 it.

Button types

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
• Buttons with icons

Basic buttons

Basic buttons come in three sizes (large, normal, and small) and three types (primary, secondary, and critical). Two of these types (primary and critical) also have subtle versions in lighter shades to show actions that won’t draw as much attention.

Primary buttons are best for the single primary action on the screen. Critical buttons work for destructive actions—actions users can’t take back. All remaining actions can be secondary buttons or another component.

import Button from "@kiwicom/orbit-components/lib/Button";
import Heading from "@kiwicom/orbit-components/lib/Heading";
import Stack from "@kiwicom/orbit-components/lib/Stack";

() => (
  <Stack direction="column">
    <Stack flex>
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title3">Type: Primary</Heading>
        <Button>Add passenger</Button>
      </Stack>
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title3">Type: Secondary</Heading>
        <Button type="secondary">Cancel</Button>
      </Stack>
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title3">Type: Critical</Heading>
        <Button type="critical">Cancel</Button>
      </Stack>
      <Stack>
        <div
          style={{
            backgroundColor: "#252A31",
            padding: "12px",
            paddingTop: "0",
          }}
        >
          <Stack shrink direction="column" spacing="condensed">
            <Heading inverted type="title3">
              Type: White
            </Heading>

            <Button type="white">Cancel</Button>
          </Stack>
        </div>
      </Stack>
    </Stack>
    <Stack flex>
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title3">Type: Primary Subtle</Heading>
        <Button type="primarySubtle">Add passenger</Button>
      </Stack>
      <div />
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title3">Type: Critical Subtle</Heading>
        <Button type="criticalSubtle">Cancel</Button>
      </Stack>
      <div />
    </Stack>
  </Stack>
)

Buttons with icons

Buttons with icons 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 Heading from "@kiwicom/orbit-components/lib/Heading";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import ChevronRight from "@kiwicom/orbit-components/lib/icons/ChevronRight";
import ChevronDown from "@kiwicom/orbit-components/lib/icons/ChevronDown";
import PlusCircle from "@kiwicom/orbit-components/lib/icons/PlusCircle";
import Edit from "@kiwicom/orbit-components/lib/icons/Edit";
import Visibility from "@kiwicom/orbit-components/lib/icons/Visibility";

() => (
  <Stack direction="column" spacing="loose">
    <Stack direction="column" spacing="condensed">
      <Heading type="title4">With right icon</Heading>
      <Stack flex>
        <Button iconRight={<ChevronRight />}>Continue to payment</Button>
        <Button iconRight={<ChevronDown />}>Show more options</Button>
      </Stack>
    </Stack>
    <Stack direction="column" spacing="condensed">
      <Heading type="title4">With left icon</Heading>
      <Stack flex>
        <Button iconLeft={<PlusCircle />}>Add item</Button>
        <Button type="secondary" iconLeft={<Edit />}>
          Add item
        </Button>
      </Stack>
    </Stack>
    <Stack direction="column" spacing="condensed">
      <Heading type="title4">With both icons</Heading>
      <Button
        iconLeft={<Visibility />}
        iconRight={<ChevronRight />}
      >
        Read more
      </Button>
    </Stack>
    <Stack direction="column" spacing="condensed">
      <Heading type="title4">Only icon</Heading>
      <Button iconLeft={<Edit />} title="Edit this page" />
    </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. 

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

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.

SocialButton

When you want to let users sign in using a social service with a simple button, use a SocialButton.