Buttons allow users to perform actions, make decisions, or begin a process. The label of a button communicates the action that it is going to initiate.

Usage

Buttons should only be used for actions. Avoid using too many buttons – if users have too many options, it is difficult for them to decide. If you want the user to select one option from a small group or to provide access to specific categories, offer a segmented control instead of a button.

• Buttons should be easy to find within the UI.
• Use simple and concise wording to describe a button’s action.
• Use a button type in accordance with its visual hierarchy.

• Do not wrap text inside a button, as a text label should remain on a single line.
• Do not stack buttons above each other. Place them side by side.
• Avoid text labels that are too long. They need to be concise.

Anatomy

Behavior and Interaction

Variations

Loading State Button

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. 

Size Variants

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. 

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. 

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. 

States

• Processing State: In the processing state, the activity indicator replaces the original icon and/or label and keeps rotating until the process is complete. Apply the animation when the processing time is longer than 1s. 

• Success State: When the processing succeeds, the indicator can be replaced with a success icon, and the text is replaced with a success message. The button can be disabled if necessary. 

• Fail State: if the loading fails, the button will go back to the original button. 

A. Tint

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.

1. Usage Contained

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

2. Usage Tonal

Use tonal tint if there are several actions with the same importance. If it is used in combination with negative actions, it can be used for positive actions.

3. Usage Text

Use the text 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.

B. Neutral

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

1. Usage Tonal

Use tonal neutral style if you have multiple buttons within a view and want to visually highlight the priority of the different actions. Tint style always reflects a higher importance than neutral style. The usage depends on the context of the app and needs to be decided on app level.

2. Usage Text

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

C. Semantic (Negative)

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

1. Usage Tonal

Use tonal negative if there are several actions with the same importance and one or more of them are negative, app designers can style the negative button in the tonal negative style.

2. Usage Text

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

Resources

Development: FioriTonalButton, FioriFilledButton, FioriTextButton, FioriFilledIconButton, FioriTonalIconButton, FioriStandardIconButton, MaterialButton

SAP Fiori for iOS: Buttons

SAP Fiori for Web: Button

Material Design: Buttons

Related Components/Patterns: Persistent Footer