UI Elements in the SAP Design System

Intro

This page explains what “UI elements” are in the SAP Design System for web, introduces our key implementation technologies – SAPUI5 and SAP Web Components – and describes how guidance for these technologies is presented in the component guidelines.

UI Element Types

In the SAP Design System, "UI elements" is an umbrella term that includes both components and patterns.

A component is a reusable building block used to create user interfaces. Simple components perform basic functions, such as a button or a link. Complex components are composed of simpler ones, such as a toolbar that includes several buttons. Components can also be combined to form patterns.

A pattern describes a solution for a common use case. Patterns consist of multiple components and may include user interactions. Application teams can follow these patterns to implement proven design approaches, such as exporting data to a spreadsheet or displaying a card with a list of items.

Implementation Technologies

The SAP Design System for web offers UI components implemented in SAPUI5 and SAP Web Components. These are the primary technologies featured in our SAP Fiori for Web guidelines.

SAPUI5

SAPUI5 is a framework for building consistent and responsive web applications that run on smartphones, tablets, and desktop browsers. It is SAP’s leading UI technology for web applications and serves as the reference implementation for the web design system.

SAP Web Components

SAP Web Components is a library of reusable UI components created with web components technology, provided and supported by SAP. These framework-agnostic components can be easily integrated into front-end frameworks and libraries, such as Angular and React.

SAP Web Components include the UI5 Web Components, which are available as an open-source offering at https://ui5.github.io/webcomponents/.

Cross-technology alignment

To ensure a seamless and predictable experience across all front-end frameworks and libraries, we are actively working to align the features of our main components across SAPUI5 and SAP Web Components.

The goal is to provide a consistent set of essential features, enabling application teams to deliver coherent user experiences regardless of the front-end technology in use.

UI Element Design Guidelines

Exploring the guidelines

In the UI Elements library, you’ll find the latest guidelines for components and patterns. On this page, you can:

• Search for UI elements
• Set filters (for example, by technology or UI element type)
• Toggle between card and list views

Technology-specific component guidelines

To support teams working with different frameworks, we currently provide two guidelines for each main component: one for SAPUI5 and one for SAP Web Components. The technology is indicated by a tag in the page header or on preview cards.

These separate guidelines reflect differences in implementation scope between SAPUI5 and SAP Web Components.

Transition to unified component guidelines

As alignment between SAPUI5 and SAP Web Components progresses, we are moving toward a single, unified guideline for each component.

This transition will happen gradually as groups of components are aligned over time. For now, you may see both technology-specific and unified guidelines, depending on the component.

The unified guidelines describe the features shared by both the SAPUI5 component and the corresponding web component, based on SAPUI5 as the reference implementation. Any differences in the two implementations are highlighted in the text and summarized in a comparison table at the end of each page.

Related Links