Overview

The buttons are the most common UI elements to indicate a possible user action. They can be formatted to show different level of emphasis.

Although they have a minimal size, their width depends on their content.

1
do
false

Recommended

  • Use buttons to trigger an action.
  • Use buttons to open a dialog or popover.
  • Use short and clear button texts.
  • Use clear and widely used icons for icon-only buttons.
1
dont
false

Not Recommended

  • Do not use buttons to navigate the user to a different page or object. Use the navigation or links instead.
guideline
Things to ConsiderThe buttons in this article are over-styles that are needed for specific BTP use cases. The button design here does not replace the standard component design. For usage and guidelines see the links below. Fiori for Web Design Guideline - ButtonFiori for Web Design Guideline - Toolbar

Anatomy

Image
1
45.67; 37.06
Text
2
55.67; 22.69
Left Icon
3
51.67; 51.31
Right Icon
4
30.00; 83.06
Badge

Button Types

Tool Header button

They are used only in the Tool Header context, only as "icon-only" variants. This button type can have a badge to alert the user of new items or updates. ex.: The Notifications icon in the Tool Header displays a badge when there are new notifications.

Image
Tool Header Button - Interaction States

Nested Button

The nested buttons are used inside more complex components that require multiple actions to be executed. Such components are the search field in the Tool Header, Navigational menu, and contextual menu items.

Nested Button - Interaction States

Nested Button - Usage

Button Variants

2
Button Do.png
do
false
  • Use transparent button type for icon-only buttons.
  • Use easy to understand and widely used metaphors for icons in buttons.
  • Use Secondary button type for text-only buttons.
  • Use Primary button type with text and icon.
Button Dont.png
dont
false
  • Avoid using transparent buttons for semantic actions
  • Avoid combining icon and text or using icon only in the secondary buttons.
  • Do not use Primary buttons for icon-only or text-only.
  • Do not use left and right icons simultaneously.
  • Avoid using more than one Primary button on a single page.
  • Do not use different button types for decoration purposes.

Button Badge

Image

Buttons can contain a badge that acts as a visual eye-catcher and attracts the user’s attention.

The badge is static and does not have a counter. Typically applied in browse and collect use cases. For example, it can emphasize the notifications item in the Tool Header when there are new unread notifications.

The badge position is not affected by the button type, size and form factor and is always positioned in the top right corner of the button

Resources

Design

Button - Visual Design Specification

Code Samples

UI5 Demo Kit

Web Components

Fundamental Styles

Leave Feedback

We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.

Leave Feedback

Track Component