Buttons

A button needs to fit various contexts. Need a loud call to action or a more ‘sit back and relax’ type of button? We got it covered. Need a button on a colorful background? Check!

  • Use clear, short & actionable labels.
  • Pick the right type for the right action.
  • Place the button in a consistent & predictable spot.
  • Limit the use of buttons to important actions. When used too much, the interface becomes cluttered & harder to scan.

Content

A button can have a label, an icon or a combination of both. The icon can be positioned on the left or right.

Sizes

Our button component has three key sizes: small, medium and large.

  • Don’t place different sizes on the same horizontal line. Use button types to declare hierarchy instead.
  • By default, the button content defines the width.
  • The minimum width equals the height of the button.
  • On narrow contexts, a full-width version that follows the padding of it’s parent container is prefered.

Button Groups

A button group is a series of buttons laid out next to each other, joined together to create one continuous UI.

  • For related actions only.
  • Don’t mix button types as they will break the idea of belonging together.
  • An overflow button can be applied to save space.
  • Limit the amount of actions to a minimum.

Toggle group

  • Make sure the selected option always stays visible
  • Use for swithing between content wihout reloading the whole page.
  • Need a pattern to switch between whole pages? use tabs instead.