Intro

These visual specifications should serve as a guideline for Front-End Developers on how implement this control.

Horizontal Toolbar without Content

Design spec for a horizontal context toolbar in two views. Left: a pill-shaped toolbar with seven icon-only buttons in a row, split by a vertical divider, with annotations A (popover container), B (action), and C (separator). Right: the same toolbar with pink spacing highlights between each button slot, annotated A, C, and D.

Value Description Details
A Popover Native UI5: Popover
Visual Core: Popover
Container Padding: 0.25rem
B Action Native UI5: Button
Visual Core: Button
Button Type: Transparent

Horizontal & Vertical:
Icon only
Top and Bottom Padding: 3px (added height to create 32x32 square)

Button with Labels: Icon & Label
C Separator Native UI5: Separator Item
Padding: 0.25rem
Orientation: Vertical on Horizontal Menu, Horizontal on Vertical Menu
D Gap between actions Gap: 0.5rem

Vertical Toolbar without Content

Design spec for a vertical context toolbar in two views. Left: a tall pill-shaped toolbar with seven stacked icon buttons and a horizontal divider, annotated A (popover container), B (action), and C (separator). Right: the same toolbar with pink spacing highlights between slots, annotated A, B, C, and D.

Value Description Details
A Popover Native UI5: Popover
Visual Core: Popover
Container Padding: 0.25rem
B Action Native UI5: Button
Visual Core: Button
Button Type: Transparent

Horizontal & Vertical:
Icon only
Top and Bottom Padding: 3px (added height to create 32x32 square)

Button with Labels: Icon & Label
C Separator Native UI5: Separator Item
Padding: 0.25rem
Orientation: Vertical on Horizontal Menu, Horizontal on Vertical Menu
D Gap between actions Gap: 0.5rem

Toolbar with Button Labels

Design spec for a vertical toolbar with labeled buttons in two views. Left: a pill-shaped toolbar with four rows, each showing a globe icon and the text "Button." Right: the same toolbar with pink padding highlights per row, annotated A (popover container) and B (the gap between actions).

Value Description Details
A Popover Native UI5: Popover
Visual Core: Popover
Container Padding: 0.25rem
B Gap between actions Gap: 0.5rem

Toolbar with Content

Design spec for a context toolbar with a content area in two views. Left: a popover with a header showing a data point title and value, a content placeholder labeled "[swap slot]", and a footer row of four icon buttons. Annotations mark the popover container (A), header (B), separator (C), and bottom toolbar (D). Right: the same panel with pink spacing highlights and an additional annotation E for the spacing between the data point title and value.

Value Description Details
A Popover Native UI5: Popover
Visual Core: Popover
Container Padding (standard): 0.5rem
B Header Alignment: Left

Data Point Title:
Native UI5: Label
Visual Core: Label
Font color: --sapContent_LabelColor
Font size: --sapFontSize

Data Point:
Native UI5: Text
Visual Core: Text
Font: --sapFontBoldFamily
Font color: --sapTextColor
Font size: --sapFontLargeSize
C Separator Native UI5: Separator Item
Top and Bottom Padding: 0.25rem
Orientation: Horizontal
D Toolbar (See Horizontal menu above)
E Gap between elements Gap: 0.25rem