Your bookmarks

Using button-type components

Buttons

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

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

Primary buttons are best for the single primary action on the screen. Use them when you want to continue in the flow of the app.

Primary subtle buttons are 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.

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

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

Critical subtle buttons are 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

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.

ButtonLinks

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

  • Primary
  • Secondary
  • Critical

All of these types can be transparent, which gives them cut off the side spacing together with a transparent background. Transparent ButtonLinks are great for uses similar to Textlinks but only when they’re standing alone and not inside Text, where TextLinks work best.

Primary ButtonLinks are great as complements to primary buttons or as a primary standalone action that is visually less heavy than primary subtle buttons.

Secondary ButtonLinks are great as complements to secondary buttons or as a secondary standalone action. Often used for filters.

Critical ButtonLinks are great as complements to critical buttons or as a secondary standalone action that is visually less heavy than critical subtle buttons.

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.