Do

• Use buttons only for actions.
• Use simple buttons for specific actions, such as “Create”, “Edit”, “Save”, “Approve”, “Reject”, “Accept”, “Decline”, “Submit”, “Cancel”.
• Use button labels that are short and meaningful.
• Use commands for all button labels. For example “Save”, “Cancel” or “Edit”.
• Use toggle buttons to activate / deactivate an element or to switch between different state, such as select and selected.
• Use secondary buttons in tint style for positive actions.
• Use secondary buttons in negative style for negative and destructive actions.

Don't

• Don’t use too many buttons to prevent users from having too many options, which makes it difficult for them to make a decision. Consider using a segmented control instead if you want the user to select one option from a small group or to provide access to specific categories.
• Don’t use green buttons for positive actions.
• Don’t truncate labels in buttons.

A. Active State

Indicates a button’s interactivity.

B. Tap State

Communicates that the button has been pressed.

C. Disabled State

Discloses that the action is available but has been disabled.

D. Keyboard Focus State

Indicates that the button is focused when navigating with a keyboard.

E. VoiceOver Focus State

Indicates that the button is a focus target during VoiceOver interaction.

Active, tapped, disabled, keyboard-focused, VoiceOver-focused buttons

Simple buttons have three different variations based on the priority of each action:

1. Primary Button
2. Secondary Button
3. Tertiary Button

Primary, Secondary, and Tertiary buttons with symbols and labels

A. Primary Button

Use the primary button for the most important action in the view, for example on a sign-in screen, landing screen, confirmation screen, error screen, or on a screen that has an explicit primary action. A primary button always has a filled style. Note that there can only be one primary action per view.

The following are examples applicable to primary buttons:

• Activate
• Confirm
• Continue
• Create
• Sign in
• Scan

Primary button in a scan (left) and sign-in view (right)

B. Secondary Button

Use the secondary button when actions are optional or have lower priority.

A card showing a secondary "Dismiss" button

C. Tertiary Button

Use the tertiary button when the action has the lowest priority or it is part of the navigation bar.

An example of a navigation bar with tertiary symbol buttons

Toggle Button

Toggle buttons change between secondary tint and secondary normal style. These buttons are used when there is a direct action to take on an object that does not require navigation or to switch between different states, such as:

• Follow/Unfollow
• Select/Selected
• Bookmark/Bookmarked
• Favorite/Unfavorite
• Hold/Release

Toggle button behavior examples of "Follow" and "Unfollow" (left) and "Select" and "Selected" (right)

The loading state can be applied to a button when a user-triggered non-disruptive progress is being processed. The original icon and/or text is replaced with an activity indicator and/or loading message. The color and style of a loading state button follows that of a tap state button. A label is optional for loading state buttons, especially for buttons in a container with limited space.

Loading state buttons

Auto-Width Loading Button: When there is only one button in a container, the button width may change according to the text length to show the full loading message.

Auto-width loading button

Fixed-Width Loading Button: When there is one or multiple buttons in a container, the button width may stay fixed to the default state width. It can hide the text-loading message and only show the activity indicator when there is not enough space. Changing other buttons to disabled state during the progress is recommended.

Fixed-width loading button

Full-Width Loading Button: When there is one or multiple buttons in a container, the button width may change to the full width of the container to show the full loading message. Other buttons the user didn’t act on will be hidden until the loading process is finished.

Full-width loading button

Tint Style

The tint button style can emphasize available actions and encourage users to interact with them. The primary button’s default style is not different from the tint one.

Usage Primary Tint

Use it for primary actions. Only one action on the screen should be styled in primary style.

Usage Secondary Tint

If there are several actions with the same importance, we recommend using secondary tint style. If it is used in combination with negative actions it can be used for the positive action.

Usage Tertiary Tint

Use the tertiary tint style if the action is placed within the navigation bar or if it has the lowest priority compared to other actions on the screen.

Normal Style

The normal button style reflects an intermediate level of visual hierarchy. The neutral button style can be used for actions that have a medium priority.

Usage Secondary Normal

We recommend using secondary normal style if you have multiple buttons within a view and want to visually highlight the priority of the different actions. Tint style always reflect a higher importance than normal style. The usage depends on the context of the app and needs to be decided on app level.

Usage Tertiary Normal

Use tertiary normal for actions with a low importance. However, the usage depends on the context of the app and needs to be decided on app level.

Negative Style

The negative button style indicates destructive actions and warns users to take extra precautions when interacting with the buttons.

Usage Secondary Negative

If there are several actions with the same importance and one or more of them is negative, app designers can style the negative button in secondary negative style.

Usage Tertiary Negative

Use tertiary negative style if if there are several negative actions within the page, for example within several object cells, or if the negative button has the lowest importance.

Button examples for a positive, negative and neutral action