SAP Web Components
Intro
Welcome to the design guidelines for SAP Web Components!
We have introduced a first set of design guidelines for SAP Web Components. SAP Web Components are framework-agnostic and can be easily integrated into different web development environments.
The articles for each component provide a basic design overview with interactive examples. You can also navigate to the developer documentation[internal_only] and the design specifications for both the visual and interaction design[/internal_only].
Explore
- Check out the UI Elements overview page (filter for “SAP Web Components)
- For an overview by component type, see the component overview below.
Approach
Why separate guidelines for SAP Web Components?
Although the basic design of SAP Web Components is aligned with the design for SAPUI5 controls, they can still differ in scope. As of today, SAPUI5 controls typically offer a richer set of features out of the box.
These guidelines are intended as a dedicated resource for all teams who use SAP Web Components in their products or frameworks.
Focus on “common components”
The design guidelines currently focus only on SAP Web Components that have been identified as common components. These are components that we expect to be used broadly across all SAP products.
Interactive examples
The guidelines feature live examples showing the component implementation.
The examples reflect the implementation status on August 2, 2024 (UI5 Web Components Release Version 1.24.8).
Related Links
[internal_only]SAP Design System Update 09/2023 (video)
At 45:05, Anja Wipfler (SAP Design System) introduces the common component guidelines.
SAP Design System Evolution (video)
At 19:30, Sophia Levens (Head of the SAP Design System) outlines the role of common components in the Design System Collaboration Model. [/internal_only]
Introducing SAP Web Components (SAP Community)
In this blog, Oliver Graeff (Director of Product Management for SAPUI5) explains SAP’s strategy for web components.
[internal_only]
Versioning
Each SAP web component has an interaction design version, which is shown on the title page of the interaction design specification.
Note: The visual design specifications are based on the theme and are the same for both SAPUI5 controls and SAP Web Components.
Version 1.0
Version 1.0 (v1.0) is the initial design version.
- Existing components: Design version 1.0 describes the implementation as of July 2023. It serves as the foundation for future design iterations.
- New components: Version 1.0 will be used as the design version for all new components.
Follow-on versions
Whenever common components are enhanced, the specification and guideline versions are updated accordingly:
- Major updates: Version 2.0, 3.0, …
- Minor updates: Version 1.1, 1.2, …
[/internal_only]
Component Overview
The list below provides an overview of all the web component guidelines currently available.
User Input (Fields)
User Input (Visual)
Checkbox
Color Palette
Color Palette Popover
Radio Button
Slider
Range Slider
Step Input
Switch
User Input (Calendar)
Related Links
Figma library containing components that are commonly used across SAP products.
A growing collection of internal learning resources around SAP’s design system.
Figma library containing components that are commonly used across SAP products.