Buttons
FUIButton
Intro
A button communicates the action that it is going to initiate. Users can tap a button to begin a process or workflow, or to trigger an action.
Examples of a standard button (left), toggle buttons (middle) and a directions button (right)
A button can consist of a label and a symbol on a filled or unfilled rectangular background.
Symbol buttons, label buttons, and label buttons with a symbol
Button States
Buttons have several states that provide feedback on a button’s interaction:
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
Toggle Button
The toggle buttons change between primary and secondary buttons. The buttons are used when there is a direct action to take on an object that does not require navigation, Such as:
- Follow / Unfollow
- Select / Selected
- Bookmark / Unbookmark
- Favorite / Unfavorite
- Hold / Release
Toggle button behavior examples of "Follow" and "Unfollow", and "Select" and "Unselected"
Button Type
Buttons now have three main types based on the priority of each action.
- Primary Button
- Secondary Button
- Tertiary Button
Primary, Secondary, and Tertiary buttons with symbols and labels
Primary Button
Use the primary button on a sign-in screen, landing screen, confirmation screen, error screen, or on a screen that has one explicit primary action. The following are examples applicable to primary buttons:
- Activate
- Confirm
- Continue
- Create
- Sign in
- Scan
Primary buttons in scan and sign-in use cases
Secondary Button
Use the secondary button when actions are optional or have lower priority.
A card showing "Dismiss" button in the Secondary type
Tertiary Button
Use the tertiary button when the action has the lowest priority, or they are parts of navigation. Tertiary buttons usually contain either only text content or only symbol.
An example of a navigation bar with neutral Tertiary symbol buttons
Button Style
Buttons also have additional two styles:
- Tint Button
- Negative Button
Tint and negative buttons
Tint Button
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.
Negative Button
The negative button style indicates destructive actions and warns users to take extra precautions when interacting with the buttons.
A vertical button stack showing different uses of each button style
Size Variations
Buttons are by default dynamic in width and are dependent on the container they are placed in, but they can also be set to a fixed width and height.
A touch area of a button should not be less than 44pt.
Your feedback has been sent to the SAP Fiori design team.