Developer mode
Opens components on the React tab by default.
Your bookmarks

Choosing components for actions

Sometimes it’s good to have a lot of choices. Other times it can be overwhelming (which is why Orbit is based around progressive disclosure). We have multiple options for presenting possible actions, including buttons, button links, and text links.

If you’d like some help with which component to use, try out this interactive decision tree. You can read about the reasons for the recommendations below.

Buttons

Our main buttons come in three sizes (large, normal, and small) and six types:

  • Primary
  • Primary subtle
  • Secondary
  • Critical
  • Critical subtle
  • White

Primary buttons

Best for the single primary action on the screen. Use them when you want to continue in the flow of the app.

A form for signing up with inputs for username and password and a single primary button.

Primary subtle buttons

Also used for primary actions but those that do not directly push you to continue in the flow. They should be used when there are multiple primary actions on one page with the same importance.

Options to add a meal, rent a car, and add insurance. All presented as equal options with primary subtle buttons.

Secondary buttons

Used for actions that aren’t so important. They are usually connected to primary buttons.

A modal for finding accommodation with a primary button to find a room and secondary button to close the modal.

Critical buttons

Used when you need to permanently delete something or have a critical action that can’t be taken back.

A dialog to confirm an account deletion with a critical button to delete and a secondary button to cancel.

Critical subtle buttons

Used mainly as complementary buttons to critical ones. They’re often used as a step before permanent deletion, so they’re visually less important than critical buttons.

This is followed by a dialog confirming the deletion with a critical button (not a subtle one).

White buttons

Used in settings where the background is darker than usual and normal buttons wouldn’t work, such as a tooltip or a picture card.

Status buttons

Status buttons should be used only in Alert components. We have two types of status buttons (Primary & Secondary). Only one Primary button can be used per Alert. There’s no limit on the number of Secondary buttons, but we recommending using no more than one Primary and one Secondary button.

import Alert from "@kiwicom/orbit-components/lib/Alert";
import AlertButton from "@kiwicom/orbit-components/lib/Alert/AlertButton";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";
import AlertCircle from "@kiwicom/orbit-components/lib/icons/AlertCircle";
import Reload from "@kiwicom/orbit-components/lib/icons/Reload";
() => (
  <Alert icon={<AlertCircle />} title="No results loaded" type="critical">
    <Stack spacing="compact">
      <Text>
        There was an error while processing your request. Refresh the page to
        load the results.
      </Text>
      <Stack flex spacing="compact">
        <AlertButton iconLeft={<Reload />} type="critical" size="small">
          Refresh page
        </AlertButton>
        <AlertButton type="criticalSubtle" size="small">
          Contact support
        </AlertButton>
      </Stack>
    </Stack>
  </Alert>
)

ButtonLinks

Our main ButtonLinks come in three sizes (large, normal, and small) and three types:

  • Primary
  • Secondary
  • Critical

All of these types can be inline, which takes away their side padding and makes only their foreground (not the background) change on hover. Inline button links are great for uses similar to text links but outside of text. Inside text, use only text links.

Primary ButtonLinks

Great as complements to primary buttons or as a primary standalone action that is visually less heavy than primary subtle buttons.

A modal to add destinations with two fields for destinations and a primary button link to add more fields.

Secondary ButtonLinks

Great as complements to secondary buttons or as a secondary standalone action. Often used for filters.

A list of carriers to choose from with some hidden and a secondary button link to show all of them.

Critical ButtonLinks

Great as complements to critical buttons or as a secondary standalone action that is visually less heavy than critical subtle buttons.

This can be followed by a confirmation dialog with a critical button.

TextLinks

Our main TextLinks come in three sizes (large, normal, and small) and two types:

  • Primary
  • Secondary

All types can be external to show that they navigate to external pages. With these links, the NewWindow icon is automatically placed on the right side.

Primary TextLinks are used for primary actions inside of text (a paragraph).

Secondary TextLinks are used for secondary actions inside of text (a paragraph). 

Button alignment

Primary buttons always appear to the right. Secondary buttons appear to the left of the primary button. Depending on the context, you can use primary subtle buttons on either the left or right side.

Button alignment in Alert

Standalone buttons should always be aligned to the left. If you have multiple buttons, align all buttons to the left. Primary buttons should be first and then Secondary buttons.

If the text in either of the buttons in a two-button layout is too long, the buttons get placed on separate lines.

Button alignment in Modal

When there is only one action in Modal, use a primary subtle button aligned to the left. If there are two actions, use primary buttons on the right of the modal action area and Secondary buttons on the left.

Button alignment in Card

The Card action area is on the right of the header for both mobile and desktop versions. In this area, we recommend using only a small primary subtle button or a small secondary button.