Buttons

Use buttons and links to trigger actions. Links are always text only, but buttons can contain both a clear label and an icon.

Common button types

Standard button

The standard button for most use cases.

Primary button

Use this style to call attention to an action on a form, or highlight the strongest call to action on a page. Primary buttons should only appear once per screen (not including the application header or in a modal dialog). Keep in mind that not every screen needs a primary button.

Link button

Use link buttons for secondary actions, semi-destructive actions such as "Cancel", or to discourage usage. Links should open in the current window unless the user could lose information, for example when filling out a form or the destination is an external site.

Dropdown button

Use dropdown buttons to display menus on click which contain a set of related actions. See drop menu.

Other button types

Icon and label button

Use this type when you want to draw more attention to the button, or when an icon helps to clarify or convey more meaning.

Icon only button

Use this type when you want to draw more attention to the button, or when an icon helps to clarify or convey more meaning.

Subtle button

Use this type when a standard button (or a toolbar of buttons) would draw attention away from more important content. This style is often used at the top of a page or section and must use an icon and a label.

Disabled button

Use these when another action must be completed before the button can be used, like changing a field value or waiting for a system response. Use this styling only with primary and standard button types.

Split button

This is a button with an attached drop-down menu of related actions. Use the labelled part of the button to invokes the most common action to provide easy access for the user. The attached menu should display a list of related actions, which should include the one shown on the button.

Compact buttons in a menu

Group and compact your buttons into a menu when there is a close relationship between several buttons. This pattern is normally used at the top of the page (see below).

Grouped buttons

Use this 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.

Writing labels

Button labels are sentence case and are as short as possible, but clearly explain what happens when the button is pressed.

Button labels

Button order

Buttons are sorted by importance from left to right.

Button order example 1

The only exception to the rule is when buttons are used to move through a sequence of screens (for example, in Getting Started Guides). In those cases, the 'Back' standard button would be on the left.

Button order example 2

Grouped buttons

Grouped buttons give users access to frequently used, related actions. You can find common placements of grouped buttons in JIRA issues, or while editing Confluence pages.

  • Group buttons logically into sets based on usage and importance.

  • Make sure that button actions are clearly labeled and consistent.

  • The main action of a group set can be styled as a primary button.

Responsive grouped buttons

You might not always be able to show all of the buttoms due to space constrains. In this case, collapse the buttons you don't have room to show into a drop-down menu with a ‘more’ icon.

Responsive grouped button example Open In review Resolved Closed