A toast is a small, non-disruptive popup for a non-semantic success message that disappears automatically after a few seconds.

Toast triggered by clicking a button – live example

When to Use

Use the toast:

• If you want to display a short, non-semantic success message to confirm that an action was performed.
• If you don’t want to interrupt users.
• If you want to confirm a successful action.

Don’t use the toast:

• To display an error or warning message.
• If you need to interrupt the user (for example, to prompt a user action or confirmation).
• If you want to make sure that users read the message before they leave the page.
• If you want users to be able to copy the message content to the clipboard (such as a product or transaction number). In this case, use a success message dialog or dialog instead.
• If you need positive semantic styling for a success statement. In this case, use the message strip or message dialog instead.

Anatomy

1. Text
2. Container

Behavior and Interaction

Placement

You can define the position of the toast on the screen. By default, it is centered horizontally at the bottom of the display.

Placement of a toast – live example

Triggering a Toast

When an action is successful, a toast automatically fades in and out. You can specify how long the toast remains visible. Set a longer duration for longer message texts.

Toast with different durations – live example

Message Text

To make the toast message easy to scan, keep the text as short as possible. Remember that the user will not have time to take in very much detail.
Don’t use the word “successfully” in the message text. This is implicit in a success message.

Patterns

For standard actions (such as create, save, delete, or send), we recommend using the following patterns, depending on your use case.

Notes:

• The exact phrasing will depend on your target audience and the conventions in your app family. If an action is repeated regularly by a heavy users, be as brief as possible (for example, Order deleted). If your app is typically for occasional users, a full sentence might be more appropriate (for example, Your request has been sent to the support team.).
• Bear in mind that long object names can increase the length of the message toast. Remember to allow for this when defining the toast duration. If long or multiple object names make the toast too cumbersome to read, leave them out. If you really need to list them in a success message, use the success message box instead.
• Use periods only for complete sentences. See UI Text Guidelines for SAP Fiori – Punctuation – Period.

Related Links

A multi input allows the user to enter multiple values, which are displayed as tokens.

To help the user enter a valid value, you can enable the suggestions feature and the value help option.

Multi input – live example

When to Use

Use the multi input:

• To provide the value help option to help users select or search for multiple business objects.
• To let users select multiple ranges (with the value help).
• To enable users to add custom values.

Don’t use the multi input:

• To choose multiple options from a large list.
• If there is not enough space available on the screen.
• To choose only one option from a list.

Anatomy

1. Tokens: Show individual selected values.
2. Input field: Area for displaying tokens and typing text.
3. Value help icon: Trigger for opening a value help dialog.

Variants

With Tokens

Predefined Tokens Only

The user can write text in the input field that does not correspond with the predefined values in the list, but a token isn’t created and the text just appears in the input field.

Multi Input with predefined tokens – live example

Including Token Creation

The user can write text in the input field that does not correspond with the predefined values in the list and create tokens with this text.

Create token from value entered – live example

With Value Help Icon

You can add a value help icon in the input field to trigger a separate value help dialog for selecting the values. The dialog must be implemented separately.

Basic multi input with value help icon

Behavior and Interaction

Select/Enter Values

To add values to the multi input, users can:

1. Start typing and select a value from the dropdown list. The selected values appear as tokens.
2. Type a text and press Enter to add a new value. This creates a new token with the typed text.

If there isn’t enough space to display all the tokens, an overflow button appears (n More, or n Items).

The user can only enter a value once. The multi input displays an error if the same token is selected twice.

Empty multi input – live example

View/Adjust Selection

If tokens are hidden in the overflow, clicking n More or n Items displays all the selected values.

Multi input with multiple tokens – live example

Globalization and Localization

The multi input supports left-to-right (LTR) and right-to-left (RTL) reading directions.

Related Links

The combobox allows users to select an item from a predefined list.

It provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.

If the entries are not validated by the application, users can also enter a custom value.

Combobox – live example

When to Use

Use the combobox:

• If users need to select a single item from a long list of items.
• If the list items are secondary information and do not need to be displayed right away.

Don’t use the combobox:

• If there are only two options to choose from. Use a switch instead.
• If users need to select an item from a short list of items. Use the select component instead.
• If there are more than 200 list items. Instead, consider using an input field with a select or value help dialog.

Anatomy

1. Input field: Displays the selected value.
2. Value/text: The content the user has entered into the field.
3. Dropdown button: Expands and collapses the option list.
4. Option list: Contains values from which the user can choose.

Variants

List Layouts

Use the two-column layout if you need to display additional information for each option.

You can group items in the option list.

Two-column layout – live example

Grouped items

Filters

When the user starts typing in the input field, the option list is filtered. Only items that match the characters entered are shown in the dropdown list. The following filter variants are available:

Starts with per term (default): Filters for items where the beginning of any word in in the label matches the query entered.

Starts with: Filters only for items where the beginning of the label matches the query entered.

Contains: Searches the full label for a match.

‘Starts with per term’ filter variant – live example

‘Starts with’ filter variant – live example

‘Contains’ filter variant – live example

Behavior and Interaction

Choose from List

1. Clicking the dropdown button opens the suggestion list.
2. Selecting an item from the list enters it in the input field.

Type or Paste Text

1. The component responds as the user types or pastes in text:
   • Suggestions are filtered based on the typed text (see Filter Variants).
   • The autocomplete feature proposes matching labels. The autocompleted part of the text is highlighted.
2. To enter a value in the input field, the user can:
   • Press Enter to accept the autocompleted text.
   • Click an item in the suggestion list.

Combobox – live example

Handling of Incorrect Values

• If the user pastes or types a text that doesn’t match one of the selection options, it remains in place by default.
• If data validation is implemented, entering an incorrect text triggers an error message and the field displays in an error state.

Data validation – error state for incorrect value

Responsive Behavior

On mobile phones, the selection list is displayed as a full screen dialog.

Related Links

The date picker lets users enter a single date and navigate directly from one month or year to another.

Basic date picker- live example

When to Use

Use the date picker:

• If users typically need to enter a single date.
• To navigate directly from one month or year to another.
• Тo enter a lot of data fast or primarily using the keyboard.

Don’t use the date picker:

• If you need a combined date and time input component. In this case, use the date/time picker.
• If you need to keep the calendar visible and prominent. In this case, use the calendar.
• If users typically need to enter a date range. Use the date range picker instead.

Anatomy

1. Date input field: The container in which a user enters data. It contains a mask.
2. Text: A placeholder or selected/typed text.
3. Date picker button: Button that opens the calendar.
4. Calendar component

Variants

The date picker supports Gregorian, Japanese, Buddhist, Islamic and Persian calendars. You can use a single calendar type only, or show two calendar types – one primary and one secondary.

Single Calendar Type

The date picker supports Gregorian, Japanese, Buddhist, Islamic and Persian calendars.

Two Calendar Types

In addition to the primary calendar, you can add a secondary calendar type.

Date picker with an Islamic calendar- live example

Date picker with a secondary calendar – live example

Custom Placeholder

You can provide a custom placeholder text. By default, the placeholder text shows the specific date format (based on the user’s locale).

Restricted Date Range

You can set minimum and maximum dates. In this case, the user can only select dates within the approved range.

Date picker with a custom placeholder text – live example

Date picker with restricted date range – live example

Behavior and Interaction

Selecting a Date

If the date picker is editable, the user can select a date in two ways:

• By typing in the input field.
• By choosing a date from the calendar. After selection, the calendar closes and the date appears in the date input field.

Navigation

To change the month, the user can either use the Previous/Next arrows or select a specific month in the month view.

To change the year, the user can either scroll through the months with the Previous/Next arrows or select a specific year in the year view.

Shortcuts

The following shortcuts are available for entering specific dates:

• “today”
• “yesterday”
• “in x days”
• “x days ago”

Date picker with shortcuts – live example

Restricted Date Range

If minimum and maximum dates have been set, selection and navigation to dates outside this range is disabled.

Formatting

If the user types the date in the input field, it must fit the required date format. For example, if the format pattern is “yyyy-MM-dd”, a valid user input would be “2015-07-30”.

Supported format options are pattern-based on Unicode Locale Data Markup Language (LDML) date format notation.

Related Links

A toggle button allows users to toggle between two states: active (pressed) and inactive (not pressed).

For example, a toggle button might be used to show or hide a screen element or to provide a filtered view of a dataset.

Toggle buttons – live examples

Toggle buttons with semantics – live examples

Disabled toggle buttons – live examples

When to Use

Use the toggle button:

• To switch between different states.
• To activate or deactivate an object or element in a toolbar.

Don’t use the toggle button:

• For actions that trigger an activity, flow, or process (such as Create, Edit, or Save). Use the button instead.
• To show a group of options. Use the split button or the segmented button instead.

Anatomy

1. Background: Different background colors visualize the state of the button.
2. Text / Icon: Describes or visualizes the state when the button is pressed.

Variants

Three toggle button variants are available:

• Text only
• Icon only
• Text and icon

Toggle button variants – live examples

(from top to bottom: text only, icon only, text and icon)

The toggle button also visualizes the priority of the action. Three variants are available:

• Primary
• Secondary (= standard)
• Tertiary

Toggle button variants for prioritization – live examples

(from top to bottom: primary, secondary, tertiary)

Behavior and Interaction

Pressing the toggle button switches between the active and inactive states. The impact of the toggle button is directly recognizable.

Toggle button behavior – live examples

Related Links

The title is a simple, large-sized text containing additional semantic information about the header level for accessibility purposes.

Title levels 1-6

When to Use

Use the title:

• To display a title above a table or form.
• To show headings in the page header.

Don’t use the title:

• If text is inside a text block. Use normal text instead.
• If text is inside a form element. Use the label instead.

Variants

Header Level

Six semantic header levels are available, ranging from H1 (highest) to H6 (lowest). The higher the level and the larger the font size, the more important the title is.

Even if titles presented on the page in a mixed order for visual appeal, assigning them to the correct header level ensures that the semantic meaning of the title is described correctly for screen reader users.

Title variants for different header levels

Header Style

The style of each header level depends on the theme being used and the specific use case. As a result, different styles may be used for titles with the same header level.

Header levels with different header styles

Title as a Link

A title can also be a link.

Title on different title level as a link – live example

Responsive Behavior

Wrapping and Truncation

You can define whether the text should wrap or truncate when there is not enough space.

For example:

• If the title is placed outside components like a toolbar, shell bar, or dialog (dialog header), use wrapping.
• If the component is designed to save vertical space, and only allows one line of the text with a limited width (like the title of a toolbar), use truncation.

Wrapped and truncated titles

Related Links

When to Use

Use the table:

• If you need to display tabular data.
• To enable selection of one or more items when details are needed to choose the correct item.
• If rows are independent of each other and no operations are required across columns.
• If you want to have only one implementation for all devices.

Don’t use the table:

• To display content that doesn’t require tabular data, such as text or images.
• To create a layout.

Anatomy

Table

1. Column Header: Contains the title for each column.
2. Column: Vertical arrangement of data within the table. A column represents a single type of information that is associated with each row in the table.
3. Row: Horizontal arrangement of data within the table. A row represents a line item for an entity with multiple data points, organized in columns.
4. Cell: A cell can contain any type of component. Each cell can contain one or more lines of text.

Group Row

A group row is a visual separator between sets of data in the table. It is used to group related data and make it easier to read and understand.

Each group row contains a heading that describes the data below it. To preserve the intended design, we strongly recommend using text only.

Variants

You can adapt the following table parameters

• Set “sticky” column headers
• Selection mode
• Growing behavior
• Components per cell
• “No data” message for empty tables
• Display of a busy indicator

Table with Sticky Column Header

You can set the column header of the table to remain fixed at the top of the page during vertical scrolling as long as the table component is in the viewport.

Table Selection Mode

The table supports different types of selection mode:

• None (default)
• Single selection
• Multiple selection

Growing Behavior

You can let the table grow – either by adding a scrollbar to the table or by showing a More button. By default, the growing capability is switched off.

Cells with Additional Components

Table with No Data

Busy Indicator

Behavior and Interaction

Focus

Single Selection Mode

Multiple Selection Mode

Sticky Column Header

If the column headers are set to “sticky”, they remain in place when the user scrolls down.

Touch Enablement

The behavior for selecting a row from the table on touch devices is similar to the mouse interaction.

The gesture for selecting a row is a one-finger tap.

Responsive Behavior

You can make tables responsive on smaller screens by hiding columns or by moving some content into the first column.

Use of these responsive features is optional. By default, the table just minimizes all visible columns until they are no longer readable.

If you don’t implement the responsive behavior, ensure that you provide an adaptive solution for smaller screens.

Minimum Width

For each column, you can set the minimum table width that is required for the column to be displayed. In this way, you can determine which columns are shown for different screen sizes. You can also allow the column to “pop in” instead of hiding it (see below).

Pop-In Mode

• Inline: Label/value pairs are listed next to each other.
• Block: Label/value pairs are listed one below the other.

Depending on how the table will be used, we recommend using the last column to show right-aligned content.

Table in pop-in mode

Content Density

The table is available in two different sizes:

• Cozy: Broader spacing for touch devices
• Compact: Regular spacing for desktop devices

Globalization and Localization

For right-to-left languages, the table is mirrored. In pop-in mode, the content pops in on the right.

Related Links

The tab bar comprises a series of tabs that each link to a different content area or view. You can use the tab bar to navigate between subpages for an object, as a filter, or to visualize process steps.

Tab bar – live example

When to Use

Use the tab bar:

• To display multiple subpages for a business object on one page.
• To let users switch easily between subpages.
• To visualize clear-cut process steps.
• To offer prominent, one-click visual filters above a set of items.

Don’t use the tab bar:

• To show only a single tab.

Anatomy

Tab Bar

1. Main bar: Contains two types of element:
   1. Tab: The clickable item inside the tab container.
   2. Tab separator: Visual indicator used to separate the tabs.
2. Overflow menu: Contains any remaining tabs that can’t be displayed in the available space.
3. Content area: Contains the content for the selected tab.

Tab

1. Icon: Icon for the tab.
2. Text: Text for the tab.
3. Additional text: Supplementary text for a tab, such as a count.
4. Subtabs: A tab can contain subtabs. For details, see Hierarchies.

The visual representation of the tab adapts automatically, depending on the elements it contains.

Variants

You can use different tab bar variants, depending on your use case:

• Text tabs
• Icon tabs
• Filter tabs
• Process tabs

Text Tabs

Text tabs allow longer labels, which are not truncated. They can also display a count after the text to indicate number of items on the tab page.

Tab bar with text tabs – live example

Icon Tabs

These round tabs can be populated with any icon. Labels are optional. If you decide to use labels, use them for all tabs. You can use additional text as needed.

Tab bar with icon tabs – live example

Filter Tabs

When used as a filter, the tab bar can contain a tab for displaying all items (optional), in addition to the individual tabs for each filter attribute. We strongly recommend showing the count as an additional text for every tab.

Tab bar with filter tabs – live example

Process Tabs

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

Tab bar with process tabs – live example

Behavior and Interaction

Selection

Only one tab can be selected at a time. Selecting a new tab deselects the tab that was displayed previously.

Tab selection – live example

Hierarchies

The tab bar supports hierarchies, allowing you to group multiple tabs under a main tab. The label of the main tab then serves as the heading for the group. An arrow indicates that a tab has subtabs.

If the parent tab has its own content, it is separated into two interactive areas, like a split button:

• Clicking the left area (text) displays the content for the parent tab.
• Clicking the right area (arrow) opens a menu with the subtabs.

Parent tabs with own content – live example

If the parent tab doesn’t have its own content, it has only one interactive area. Clicking the main tab opens the menu with the available subtabs.

Parent tabs without own content – live example

Responsive Behavior

Overflow

If there isn’t enough space to show all the tabs on the main bar, an overflow menu appears automatically, containing all the remaining tabs.

You can set the overflow mode, depending on your use case:

• End (default): The overflow only appears at the end of the tab bar. Use this mode if the order of the tabs isn’t relevant.
• Start and End: The overflow menu can appear dynamically either on one or on both sides of the tab bar. Where the overflow appears depends on which tab is activated. Use this mode if the tabs need to stay in the same order.

You can also replace the buttons for the overflow menus with custom buttons.

Overflow mode ‘End’ – live example

Overflow mode ‘Start and End’ – live example

Related Links

The switch mimics a physical switch. It allows users to toggle individual features on or off.

Switches are mainly used for settings, personalization, and other use cases where the impact of the switch is directly recognizable.

Switches – live examples

When to Use

Use the switch:

• To set something as active or inactive (such as a dialog).
• To clearly show the mode or state of a setting.
• If the change takes immediate effect.

Don’t use the switch:

• If additional steps are required for changes to take effect (for example, if the setting requires confirmation or a Submit button). Use a checkbox instead.
• If it’s not clear whether the component is showing a state or an action. Use a checkbox instead.

Anatomy

1. Track: The track is the container for the handle. The track color also visualizes the state of the switch.
2. Handle: The handle indicates whether the switch is toggled on or off. This is visualized by different icons within the handle.

Behavior and Interaction

Clicking the switch toggles the state of the switch between active and inactive. If the switch is active, the described state is applied.

Clicking a switch sets the focus to the switch component. This is indicated visually by a solid line that surrounds the entire component.

Switches behaviour and interaction – live examples

Related Links

The step input component allows the user to change the input value in predefined increments (steps).

Step input – live example

When to Use

Use the step input component:

• To adjust amounts, quantities, or other values quickly.
• To adjust values for a specific step (for example, in a shopping cart).

Don’t use the step input component:

• To enter a static number (for example, postal code, phone number, or ID).
• To display a value that rarely needs to be adjusted and does not pertain to a particular step.
• To enter dates or times.

Anatomy

The step input component consists of:

1. Icon buttons to decrease or increase the value
2. An input field

Variants

The value in the input field can be aligned left, centered, or aligned right (default). To make it easier to compare numbers, we recommend using right alignment.

You can also use a label with the step input component.

Step input with right-aligned value (default) – live example

Step input with centered value – live example

Step input with label

Behavior and Interaction

The user changes the value by clicking the increase/decrease buttons, by typing a number, or by scrolling. The buttons increase or decrease the value by the increment (step) you specify.

Initial Value

The input field always contains a value. You can set the initial value or leave the default initial value of 0.

You can also add a placeholder text, which is visible when the value is deleted and the step input is active.

Step input with initial value set to 1 and placeholder – live example

Value Precision

The step input component supports decimal values. You can specify the number of digits displayed after the decimal point.

Step input with value precision set to 1 decimal place – live example

Minimum and Maximum Values

You can specify minimum and maximum values. When the minimum or maximum value is reached, the corresponding increase/decrease button and up/down keyboard navigation are disabled.

If the user manually enters a value that is outside the permitted range, the step input component displays an error state and message.

Step input with a minimum value of -10 and a maximum value of 10 – live example

Related Links

The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions on the right.

Split buttons – live examples

Split buttons with semantics – live examples

Disabled split buttons

When to Use

Use the split button:

• To offer a group of actions when one option is used more often than the others.

Don’t use the split button:

• To switch between different states. Use the toggle button or the switch instead.
• For standalone actions with no additional options. Use the button instead.

Anatomy

1. Background: Different background colors visualize the state of the button.
2. Text / Icon: Describes or visualizes the action that is triggered by the left interactive area.
3. Separator: Indicates that the two areas result in different actions.
4. Arrow: Opens the menu.

Variants

Three split button variants are available to indicate the default action:

• Text only
• Icon only
• Text and icon

Split button variants to visualize actions – live examples

(from top to bottom: text only, icon only, text and icon)

The split button also visualizes the priority. Three variants are available:

• Primary
• Secondary (= standard)
• Tertiary

Split button variants for prioritization – live examples

(from top to bottom: primary, secondary, tertiary)

Behavior and Interaction

The split button has two interactive areas:

• The left click-area triggers the default action.
• The right area (arrow) opens a menu with the additional actions. For more information, see Menu.

Split button behavior – live examples

Related Links

A slider enables the user to adjust a single value within a specified numerical range.

Slider – live example

When to Use

Use the slider:

• If you want to provide graphical support for changing a value.

Don’t use the slider:

• For decorative purposes.

Anatomy

1. Start point: Minimum value of the slider range.

2. Track (active or inactive)

3. Slider handle: Grip for setting the value.

4. Tooltip (optional): Displays a tooltip with the current value above the handle.

5. Tick marks (optional): Visualize the value intervals (steps). Each tick mark represents a selectable value.

6. Labels (optional): Labels some or all of the tick marks with their values.

7. End point: Maximum value of the slider range.

Variants

The following slider variants are available:

Basic slider

Disabled slider

Slider with tooltip

Slider with tooltip, tick marks, and labels

Behavior and Interaction

Changing the Value

If the slider is editable, the hand cursor appears when the user hovers over the slider.

The user can change the slider setting in the following ways:

• By using drag and drop to adjust the handle. The handle snaps to the nearest interval value.
• By clicking the track. The handle then moves to this new position.
• By using the key combination Shift/Cmd + Arrow keys.

Slider with tooltip, tick marks, and labels – live example

Responsive Behavior

Related Links

Basic select component – live example

When to Use

Use the select component:

• If users need to select only one item from a short list of options.
• If the values in the option list are of secondary importance and do not need to be displayed right away.

Don’t use the select component :

• If users need to choose between only two options. Use a switch instead.
• You need to offer a very large set of options. In this case, use a combobox
• You need to display more than one attribute or search on multiple attributes. In this case, use an input with a select dialog / value help.
• All available options need to be displayed right away. In this case, use radio buttons.

Anatomy

1. Input field: Displays the selected value.
2. Value/Text: The content that is selected.
3. Dropdown button: Expands and collapses the option list.
4. Option list: Contains the selectable values.

Variants

Two-Column Layout

Use the two-column layout if you need to display additional information for each option, such as currencies or abbreviations.

Select with a two-column layout – live example

Adjustable Width

The width of the option list adapts to its content.

Select with adjustable width – live example

Basic Select with Icons

You can display an icon for each option.

Select with icons 

Behavior and Interaction

If the select component is editable, the user can select an item by first clicking on the dropdown button and then choosing a specific option from the list.

On mobile phones, the option list is displayed as a full screen dialog.

Related Links