Buttons

Read about our dashboard design system and its visual components.

Version 1.0
Button colors

There are four button variations available to choose from. By default, use the secondary button variant for main call to action UI elements. This can be paired with the light button when more than one button is needed.

  • Use the secondary variant for main call to actions
  • Use the light variant when pairing buttons
Button sizes

There are five button size options. In general, use medium sized buttons common call to actions. Small buttons are reserved for situations where the button exists inside a card or table row. Only use large or extra large sizes sparingly for situation when size emphasize is needed e.g sign up or sign in pages.

  • Use medium size buttons for general call to actions
  • Small buttons are reserved for cards and table rows
Button text styles

There are two button text styles available. The title case buttons should generally be used on the marketing website and one-off pages such as the sign up or sign in pages. In all other cases, use the capitalized variant.

  • General buttons are used for marketing and one-off pages
  • All UI related buttons should be capitalized
Icon buttons

Buttons can have icons to provide further visual context. All button icons are use the Font Awesome icon set with the regular weight. Ensure there is a gap of unit scale 3 between the icon and the text.

  • Use the Font Awesome icon set with regular weight
  • Ensure there is space between the icon and text
Dropdown buttons

Dropdown buttons are great for situation where multiple actions need to be grouped under one interactive umbrella. Dropdown buttons feature an angle icon on the right with shaded border. Try to find icons to pair with each menu item to provide further context.

  • Dropdown buttons must have an angle icon on the right
  • Try to find icons appropriate for each menu item