Button

Displays a single important action a user can take.

“If everything looks important, then nothing is important.”
― Patrick Lencioni

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 visability; label: describes the main action and works best when short; icon right: shows additional options for the button (expandable, link, etc.).

General guidelines

Identify which actions are most important. This will help to determine which button sizes to use when. Our users should be certain of what action to take next.
If you use a button in a tight space, it may be better to use full-width version. It’s also highly recommended to use full-width buttons in mobile version and mobile application.
Use actionable verbs for labels, eg. “Add passenger”, “Pay” or “Edit passenger”.
Avoid using disabled buttons. These tend to be more confusing than helpful. When you need them, always make it clear to users how to activate them.

Button combinations

All buttons are defined by three main properties: size, type, & variation. However, we don’t use all possible button combinations; we have few defined use cases.

Basic buttons
Button links
Buttons with icon
Special button types (Social button, Status buttons, …)

Basic buttons

Basic buttons have three sizes (large, normal, and small) and can be either primary or secondary type.

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 large button for leading page action

Every page should have only one Primary Large button, only for the most important action – leading the user to the next step.

The remaining large buttons should be secondary.

# Every screen should have a maximum of one primary action

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

# 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 other Secondary would be manipulating with user towards our preferred choice.

Button Links

Link buttons have a similar look as classic links, but the area surrounding them is clickable. That makes them great to use outside of paragraphs or for less important actions in the interface. We use Link buttons only in a small and normal version.

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.

Button with icon

Buttons with icon are great when you need to draw more attention to the action.

However, it’s essential to not over-use these buttons. If everything tries to grab 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>

# Add right icon to Button when action adds another item

For use cases like this, it’s great to use some icons with ‘plus’ inside, e.g. PlusCircle or PassengerAdd.

# Use only directional icon on the right

It can help to explain what will happen when the user clicks on the button.

# Add accessibility label when using icon-only buttons

Even the simplest icons like “plus” can be understood in many different ways. Be sure that you’ll add a proper label to an icon-only button.

Special button types

Apart from the basic types of buttons, we also have several very specific buttons. We use these buttons for specific use cases, and we usually don’t use them in all available sizes.

Social buttons

We use social buttons only in normal size.

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>Log in with Facebook</Button>
  <Button iconLeft={<Google />} type="google" bordered>Log in with Google</Button>
</Stack>

# Use social buttons in login form

That’s their main and only function.

# Don’t use a filled version of Google button

According to Google Material guidelines, we should use their with colored ‘G’ logo on white background.

Status buttons

We use status buttons exclusively in Alert messages when we need to show supporting action connected to the displayed message. We only use the small size of 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>
    <Button size="small" bordered type="success">Success Bordered</Button>
  </Stack>
  <Stack shrink direction="column" spacing="condensed">
    <Heading type="title5">Type: Info</Heading>
    <Button size="small" type="info">Info</Button>
    <Button size="small" bordered type="info">Info Bordered</Button>
  </Stack>
  <Stack shrink direction="column" spacing="condensed">
    <Heading type="title5">Type: Warning</Heading>
    <Button size="small" type="warning">Warning</Button>
    <Button size="small" bordered type="warning">Warning Bordered</Button>
  </Stack>
  <Stack shrink direction="column" spacing="condensed">
    <Heading type="title5">Type: Critical</Heading>
    <Button size="small" type="critical">Critical</Button>
    <Button size="small" bordered type="critical">Critical Bordered</Button>
  </Stack>
</Stack>

# Use Status button together with related Alert messages

They are great if you need to support your message with additional action, for example, open dialog with more information.

# Always use confirmation dialog when removing something

Be sure that users didn’t click on critical button removing something by mistake.

Button states

All our buttons use consistently defined set of states.

Description of behavior

Hovered – We change the background of a button to its color :hover shade. For Button Link, we use Cloud Light :hover color.
Active – We scale down the button with the modifierScaleButtonActive design token and also change the background to its color :active shade.
Focused – The background stays same as in normal version but we create light blue shade around the button.
Disabled – We change the opacity of button with the opacityButtonDisabled design token. It also deactivates other states like hover, active or focus.