Button
A button is a simple component which displays a single action a user can perform on a page.
Component status




“If everything looks important, then nothing is important.”
β Patrick Lencioni
Content structure

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>
Remaining large buttons should be secondary.
Making one Primary and other Secondary would be manipulating with user towards our preffered 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>
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>
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>
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>
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.