Buttons

Buttons are used as triggers for actions. Depending on the use case, buttons contain a combination of a clear label and an icon.

Button labels

All button labels are sentence case. They should be as short as possible, while clearly explaining to users what happens when they click the button.

Button order

Buttons are sorted by importance from left to right.

The only exception to the rule is when buttons are used to move back and forth within a sequence of screens (i.e. a wizard). In such a case, the 'Back' standard button would be on the left.

Button types

Button Description
The happy path action on forms, and the strongest call to action on a page. It can only ever appear once per screen (not including the application header; can appear in a modal dialog, ignoring what's on the main page). Not every screen needs a primary button.
The generic button for most use cases.

Used for secondary actions, destructive actions such as "Cancel", or to discourage usage.

Link buttons should open in the current window unless:

  • The user may lose information, e.g. when filling out a form
  • The destination is an external site, e.g. for a knowledge base article
Menu item 1 Menu item 2 Menu item 3 Trigger menus with a set of related actions. The label of the button has to convey the underlying actions sensibly. See Dropdowns

Button variations

These variations can be used against all button types. For button groups on your page, only choose one type of variation, do not mix them.

Button Description
The most generic use case.
Used for standard buttons on gray backgrounds.
When you want to draw more attention than usual to the button, or when an icon helps to convey the meaning of the button.
Icon only button. When space is constrained and the function of the button is obvious. Using a button with a label is preferred over this approach.
Used when a toolbar or standard buttons would otherwise draw attention away from more important content. It is often used at the top of a page or section. An icon must be used with this variation.
Used when an action has to be fulfilled first before the button action is usable, e.g. changing a field value, waiting for a system response, etc. Only for primary and standard button types.
Menu item 1 Menu item 2 Menu item 3

A button with an attached dropdown menu of related actions. The labelled section shows the 80% use case action for easy access, while the attached dropdown menu shows a list of related actions (including the one shown on the button).

Only to be used with standard buttons. This variation is used to show the close relationship between a number of buttons, and is usually used at the top of a page.
Menu item 1 Menu item 2 Menu item 3 This button style is mainly used for standard buttons in tables. It can also be used in situations where buttons are in a container (visible or invisible) that doesn't have enough space for a normal button size, like actions in an rich text editor toolbar. This rule is only to be applied when all other options (merging into dropdown buttons, cutting down actions, rewording button labels etc.) have been exhausted.

Grouped buttons

Grouped buttons give users access to frequently performed actions of a focused task. Common grouped buttons placements can be found on a JIRA issue or while editing a Confluence page.

Interactive example

Agile board Rank to top Rank to bottom Log work Attach files Attach screenshot Add / Edit UI mockup XML Word Print version

Usage

  • Create grouped buttons for the actions users need
  • Order the buttons in a group for actions that are used regularly or are significant
  • Buttons should be grouped into sets and ordered based on usage and importance
  • Ensure that the action of a button is clearly communicated to the user
  • The main action of a group set can be a primary button

Toggle button

Toggle buttons provide a quick way to see whether a given option is enabled or disabled and to toggle between these states. Use it when your main intent is to turn something on or off (e.g. ‘enable public access’).

Illustration of a toggle button, with a tooltip reading 'off'.
Tooltip:
Details on the currently selected state. Defaults to 'Off' or 'On'.

Usage

Place a toggle button in a table, to the right of a label, or below a section describing what is enabled/disabled.

Use a radio button or dropdown if the two states in question are separate options (e.g. git/mercurial) rather than an on/off switch. This also applies if there are more than two states.

Use a checkbox if your choice appears in the context of a form or is a secondary action and needs less visual prominence.

Use a button if you need to confirm the change or collect additional input.