Button

Buttons are used as triggers for actions. There are a variety of different button styles applied throughout our products each used to represent a specific type of action.

Outlined below are the rules around each button style, and how and when each style should be used. All buttons are 30px in height, with the exception of large buttons .btn-lg which are 40px in height.

Avoid using disabled buttons to prevent users from completing an intended action without providing an explanation as to why the button has been disabled.

This explanation could be presented as a validation message, tooltip on hover or popover notifying the user what they need to do in order to activate the button. Regardless of how – always offer an explanation.

Example

Variation type

Example

API

Name Type Default Description
type string “primary” one of: “primary”, “secondary”, “link”, “delete”
disabled boolean false when true adds disabled class to button
onClick function
className string

Used by

Team
Bumblenauts

Primary Button

Primary button is the strongest call-to-action on the page. Green is used to represent a positive action. There should only ever be one primary button on screen at any one time.

Example

Secondary Button

Secondary button is used for every action on the page that is not primary. There can be multiple secondary buttons on screen at any one time. The secondary button has a transparent background by default state.

Example

Delete button

Delete button is typically used as a delete confirmation button option. For example, there will be a delete option on one screen, but the red delete confirmation button is often placed inside a delete confirmation subsequent screen or modal.

Example

Link Button

Link button is used as a tertiary button. It should be used on functionality that will be used very rarely or to discourage use.

Example

Link button icons

Icons in link buttons are gray and hover: $gray-base.

Example

Disabled button

Disabled status: showcases how each button type will look when disabled. Adding either the attribute disabled or the class .disabled acheives the same.

Example

Size small

Small buttons are used within tables, cells, slats, or for actions that are not primary or secondary actions but relate to specific page elements. They can also be used in Search, Sort and Filter rows inline with other controls such as search fields and date controls for example. Small buttons have the same height as other buttons (30px) but have a smaller font size: 12px.

Example

Size large

Large buttons have the height of 40px and a font size of 14px.

Example

Extra small (Icon buttons)

Extra small buttons .btn-xs are mainly used with one icon only and have their padding left and right reduced, commonly used for the 'more' button and are used within tables and slats to trigger simple dropdowns and to reduce cognitive load.

Example


Toggle buttons

Toggle button is used to switch between views. This could be full page views or information within a page. Only to be used with secondary buttons. The toggle style is used by toggling the class .active on the button.

Example




Button Positioning

Action row

The primary button should always sit furthest to the right. The buttons are positioned to the far right of all modals and to the far right of any form. Within long forms the buttons sit at the far top of the screen and follow the user down the page for easy access during long form filling.

If you have a Primary and a Secondary grey button on the same line, the padding should be 10px between.

Example

Button labeling

Example
Button Description

All button labels should be as short as possible but clearly define the buttons behaviour.

Avoiding labeling that could be left to interpretation (representing the same scenario as above).

Any common action that leaves nothing to interpretation or is obvious to a specific context can be simply stated.

Labeling for back should always give context to where the user is heading.