Overview
Title Bars are intended to organize the information flow on a page. Their primary purpose is to provide context via a short meaningful title to the information below them. Typical usages of content title bars are to label forms, tables, card groups, lists of settings, etc.
Look and Feel
Legacy Guideline Available
This guideline pertains to the most recent version of the SAP Design System. Previous iterations of this guideline remain applicable for tools that have not yet adopted the latest design vision.
Legacy Guidelines:
When to Use
Recommended
- To set context for the content below the title
- To label tables, lists and forms
Not Recommended
- Avoid using the title bar for grouping content, use group headers instead (mostly in forms)
- Avoid using more than one title bar in the same row
- Avoid nesting title bars
Anatomy
Title Bar is a composite control that uses a toolbar as a container and a title for labeling. It varies from the standard title control in its bold visual state and text size. In addition, title bar comes in three variants:
- Standard - similar to the Fiori title but visually different
- Title and Subtitle - when an additional line of text is displayed below the title
- Title and Info Icon - when an additional icon is displayed right after the title
Standard Title
This would be the most used variant of the Title bar. The goal of this control is to provide a stronger visual differentiation between content sections on a page.
Title and Subtitle
This variant of the component is to be used when additional information regarding the content block below it is needed. Such information can be:
- Timestamp of an event - last saved, last edited, date created, etc.
- Short explanation - child of another entity, member of a group, etc.
- Semantic status - warning or error
Title and Info Icon
This variant of the Title Bar is to be used when additional help or assistive text is needed to clarify what the content section is about. The assistive text is to be placed in a popover triggered by the info icon.
Back Button
The Back button is used to navigate to the previous screen in cases such as from child to parent navigational menus.
See also:
Section Titles and Actions
Since the content section titles are placed in toolbars it stands to reason that actions that affect the content can be added in the toolbar. Typical action for a toolbar would be:
- Organization - Filter, Sort, Group
- Triggers - Edit, Add, Create, Import, Export
- Mass action - Delete/Remove All, Open, Compare
Section Titles and Other Controls
Often the content presented can be displayed in multiple ways. In such cases switching between the different visualizations of the same content can be achieved by either a segmented button or a select control. Select controls also can be used to switch between the details of list items.
- Avoid using the select view switch to switch between list items with more than 10 entries
- Avoid using the multi selection features to display more than one view or simulate comparison
Writing Titles
Recommended
- Write titles as short as possible really 1-2 words
- Write titles as descriptive as possible in relation the content below
- Use subtitles or info icon if you need to specify further details
See also:
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.