Intro

Buttons enable users to trigger actions in applications, from submitting data to opening menus or toggling views. They are available in different types and visual styles to reflect purpose, priority, and intent. Button behavior and appearance can change depending on user interaction, layout context, or the type of task.

Button component

There are 4 button types:

Simple button for one action
Toggle button to switch between different states
Segmented button with a group of options
Menu button with a group of actions

When to Use

false

Use the button types as follows:

Use simple buttons for specific actions, such as Create/Edit/Save, Approve/Reject, Accept/Decline, OK/Cancel.
Use toggle buttons in a toolbar to activate or deactivate an object or element. You can also use toggle buttons to switch between different states.
If you want the user to select one option from a small group, offer a segmented button in the toolbar. For example: Year/Month/Day, or Small/Medium/Large.
Use the menu button if you need a menu that provides more than one option.

dont

false

Do not use buttons if:

You want to link to a different page or object. Use the link instead.
You want to display general navigation functions. Use Home or breadcrumbs, ensuring navigation is clearly distinguished by positioning items on the left side.
You want to provide the ability to navigate within a multi-step process. Use a wizard instead.
You want to let users upload content. Use the upload set control instead.
You want to let users select from multiple related options. Use radio buttons or checkboxes.

Anatomy

Text: Describes the action triggered by the button.
Icon: Shows a symbol to help clarify what the button does.
Stroke: Outlines the button with a border to define its shape, especially in low-contrast environments.
Background: Indicates the button’s semantic meaning using different background colors (for example, neutral or warning).

Anatomy of the button control

Types

Button

Buttons can trigger different types of actions, with appropriate styling to help users recognize the intent and importance of each one. These different action types are explained in more detail in the action placement guideline.

Button Variants

A. Text Only

B. Icon Only

C. Icon and Text

Button variants

guideline

Within SAP S/4HANA, a button can contain either an icon or a text.

The SAP Fiori Elements framework supports only text buttons, except for in tables, where inline action buttons can be either icon or text, not both.

Button Priority and Emphasis

A. Primary Action: Emphasized with filled color appearance; used for primary or most frequent action.

B. Secondary Action: Light or minimally styled appearance; used for supporting actions.

C. Tertiary Action: Minimally styled button, often with color-only text and no border; used for low-priority actions.

Button types by priority

Button Intent and Styling

A. Success Action: Positive styling (green); used to confirm successful or desirable outcomes.

B. Negative Action: Error styling (red); used for actions that delete, remove, or cancel, such as delete account or cancel subscription.

C. Attention Action: Caution styling (yellow); used for actions that might lead to unintended consequences, such as continue without saving or send anyway.

Button styles by intent

guideline

Always use a text button for primary, secondary, semantic, and negative path actions.

[external_only]Use icon buttons only if the icon metaphor is easily recognizable. Ideally, it should have same meaning worldwide.[/external_only] [internal_only]Use icon buttons only for very basic standard icon metaphors described in the product standard for UX consistency (UXC-019 – Iconography, section: “Specification Icon Metaphor Alignment”).[/internal_only] For more information about icons in general, check out the article on iconography.

Header and Footer Toolbars

Use the following button styling for the different action types in the header and footer toolbar:

Primary action: Use the emphasized button style. Note that there can only be one primary action per page.
Secondary action: Use the default button style. In SAPUI5, you must implement type=”ghost” to achieve this style in the header and footer toolbar.
Negative path action: Use the transparent button style.
Semantic action: Use the semantic buttons for positive and negative actions. Use the “Accept” style for positive actions, and “Reject” for negative actions. Semantic actions must always be text buttons.

[internal_only]Do not use any other styling types.[/internal_only]

Content Toolbars

Use the following button styles in content toolbars for tables, forms, or charts:

If the single primary action for the whole page is in the toolbar, use the emphasized button style.
If the single primary action for the whole page is not in the toolbar, highlight the most important button in the toolbar with the default button style.
For secondary actions and negative path actions, use the transparent button style.
For split buttons and menu buttons, use the transparent button style.
Do not use semantic button styles.

Toggle Button

A toggle button switches between two actions. One of the actions is always active, one is inactive. Use the toggle button for secondary actions.

Apply the following button styles for the different toolbars:

Header and footer toolbars: Use the standard button style.
Content toolbars: Use the transparent button style.

Do not use any other styling types and ensure the button label communicates the toggleable nature of the button.

Toggle button - regular and pressed state

Segmented Button

A segmented button shows a group of options. Only one of the options can be active, the others remain or become inactive. Pressing an option activates it. By default, the control for segmented buttons calculates the button width and applies it to all buttons within the group. You can change this by setting the width for individual buttons.

The segmented button is comparable to a radio button group control.

Segmented button - regular and pressed state

There are two types of menu buttons. Both can contain items and submenus.

When the user activates the button, the menu opens. This is the default type.

Standard menu button

The split menu button is separated into two areas: the text and the arrow icon. The separator between them signals that the two areas result in different actions. The user has two choices: activating the text on the button triggers the action. Activating the arrow opens the menu. The split button consolidates a variety of commands, especially when one of the commands is used more often.

In split mode, the text depends on the default action. If the default action is displayed as an icon only, all the menu items must contain icons.

Split menu button

The split menu button can have two different behaviors:

The button always triggers the default action set by the app developer. If no default action has been defined, the first item in the menu list becomes the default.
The button triggers the last action chosen by the user. Initially, it also triggers the default action. However, when the user selects a different action, this user action becomes the default, and the button text changes accordingly. The button has a fixed size and the text truncates if the menu item exceeds the available width (as with the combo box).

Behavior and Interaction

Buttons can be triggered through mouse, keyboard, touchscreen, and screen reader interaction.

A button provides visual feedback for “hover”, “press-down”, and “focused” states.
A toggle button remains in the pressed state until it is pressed again.
In a segmented button, the chosen option stays active until the user presses one of the other options.
A menu button displays a dropdown menu on activation.
In a split button, selecting the button text triggers that action directly. Activating the arrow opens a dropdown menu. If the user selects a menu item, the action is triggered and the menu closes.

If an action cannot be triggered, or is temporarily unavailable, use the disabled state for the corresponding button.

If you want to switch a text, icon or tooltip after a button click, bear in mind to use the invisible message control to also convey the information to screen reader listeners.

All three button types support the cozy and compact form factors. For more information, check out the article on content density.

Button states - regular, hover, pressed, focused, and disabled