Do not use two high-emphasis buttons in a button group.

Although secondary buttons have less visual prominence because they are less saturated than their primary counterparts, they are still tonally heavy. If your layout requires multiple actions—as is the case with some toolbars, data lists and dashboards—low emphasis buttons (tertiary or ghost) may be a better choice.

Keep in mind that you should only group together calls to action that have a relationship to one another.

As a general rule, a layout should contain a single high-emphasis button

You don’t necessarily need to use the buttons in the order that their labels imply. For example, you don’t always need to use the secondary button as the second button in your layout. The most important thing is to establish a visual hierarchy between the buttons in your UI.

SmallUse when there is not enough vertical space for the default or field-sized button.MediumUse when buttons are paired with input fields.Large (productive)This is the most common button size. Use 14px body copy.Large (expressive)The larger expressive type size within this button provides balance when used with 16px body copy. Used by the IBM.com team in website banners.Extra largeUse when buttons bleed to the edge of a larger component, like side panels or modals. Note: This variant is not offered in the kit because it does not have a coded counterpart. Carbon only offers this button in the context of the modal component.2XLUse when buttons bleed to the edge of a larger component, like side panels or modals. Note: This variant is not offered in the kit because it does not have a coded counterpart. Carbon only offers this button in the context of the modal component.

VariantPurposePrimaryFor the principal call to action on the page. Primary buttons should only appear once per screen (not including the application header, modal dialog, or side panel).SecondaryFor secondary actions on each page. Secondary buttons can only be used in conjunction with a primary button. As part of a pair, the secondary button’s function is to perform the negative action of the set, such as “Cancel” or “Back”. Do not use a secondary button in isolation and do not use a secondary button for a positive action.TertiaryFor less prominent, and sometimes independent, actions. Tertiary buttons can be used in isolation or paired with a primary button when there are multiple calls to action. Tertiary buttons can also be used for sub-tasks on a page where a primary button for the main and final action is present.DangerFor actions that could have destructive effects on the user’s data (for example, delete or remove). Danger button has three styles: primary, tertiary, and ghost.GhostFor the least pronounced actions; often used in conjunction with a primary button. In a situation such as a progress flow, a ghost button may be paired with a primary and secondary button set, where the primary button is for forward action, the secondary button is for “Back”, and the ghost button is for “Cancel”.

Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.