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.
A button can have a label, an icon or a combination of both. The icon can be positioned on the left or right.
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.
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.
- 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.