Button

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

To implement Button component into your project you'll need to add the import:

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

After adding import into your project you can use it simply like:

<Button>Hello World!</Button>

Props

Table below contains all types of the props available in Button component.

Name Type Default Description
block boolean false If true, the Button will grow up to the full width of its container.
bordered boolean false If true, the Button will have a lighter version, with border and light background.
circled boolean false If true, the Button will have circular shape.
children React.Node The content of the Button. See Functional specs
component string \| React.Node "button" The component used for the root node. Either a string to use a DOM element or a component.
dataTest string Optional prop for testing purposes.
disabled boolean false If true, the Button will be disabled.
external boolean false If true, the Button opens link in a new tab.
href string The URL of the link to open when Button is clicked. See Functional specs
icon React.Node The displayed icon (will be removed in the future, use iconLeft instead).
iconLeft React.Node The displayed icon on the left.
iconRight React.Node The displayed icon on the right.
onClick func Function for handling onClick event.
size enum "normal" The size of the Button.
submit boolean false If true, the Button will have type="submit" attribute, otherwise type="button".
type enum "primary" The type of Button.
width number 0 The width of the Button. Number is defined in px.

enum

type size
"primary" "small"
"secondary" "normal"
"info" "large"
"success"
"warning"
"critical"
"facebook"
"google"

Functional specs

  • By passing the href prop into Button, it will render into a element. If you pass component prop it will override this logic.

  • If you want to render Icon only Button, you just need to let children prop empty and set up any icon you want to use.

  • If you want to use the component prop then YourComponent should accept at least className. Otherwise it won't be rendered with proper styling, e.g.:

    const YourComponent = props => <div {...props} />
    
    <Button component={YourComponent}>Title</Button>

    If you specify the children of YourComponent component, it will override the children prop of Button component, e.g.:

    const YourComponent = props => <div {...props}>YourComponent</div>

1. General button 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.

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

― Patrick Lencioni

2. 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
  • Link buttons
  • Buttons with icon
  • Special button types (Social button, Status buttons, …)

2.1. Basic buttons

Basic buttons have three sizes (large, normal and small) and can be either primary or secondary type. With a combination of these attributes, we have six basic button types:

Use Primary Large button only for most important action on the page
Every page should have only one Primary Large button. Remaining large buttons should be secondary.
Every screen should have a maximum of one Primary Normal button
If you have more important actions on one screen, use Primary Small button to show different levels of importance.
Use secondary small buttons for additional actions on the page
The secondary small button is great for actions like „Edit passengers“ in the Manage my booking section because 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.

2.2. Link buttons

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.

Use Link button with an icon for additional filters in Search form
Filters are an additional feature of Search form, so it's ok to use the less prominent button.
Use Link button as standalone links, e.g., in top menu
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.

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

Use Button with icon when action adds another item to the page
For examples like this it's great to use some icons with 'plus' inside.

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

2.4.2 Social buttons

We use social buttons only in normal size.

Use social buttons in login form
That's their main and only function. It's recommended to use buttons together with their pre-defined labels.

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

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.

2.4.4 Destructive buttons

Destructive buttons are a specific version of critical status buttons, paired together with ‘Remove’ icon. We use them when we need to inform our users about possible dangerous actions (canceling a booking, removing an item, etc.).

Always use confirmation dialog when removing something
Be sure that users didn't click on destructive button by mistake.
It's recommended to use bordered version if using button standalone
Remove icon and color should make clear that something else is happening there. Filled button would draw unintended attention.
Use a Large Destructive button in confirmation dialog
It's also recommended to let users know that action can be irreversible and data can be lost (if that's the case). The large size of a button should also support the importance of this action.

2.4.5 Bordered buttons

We shouldn’t use this style too much, but it needs to exist mostly because of social buttons and supporting destructive buttons.

Use Bordered button only on white background and with sufficient space around them
They can have problems with visibility and using them like this helps them to be recognizable.
Use Bordered buttons only with supporting icon
They can have problems with visibility and using them like this helps them to be recognizable.

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