Intro

The context toolbar provides actions that appear when an object is selected.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=47992-97372&t=PH8rfqkXih75NqsP-11

When to Use

Do

Use the context toolbar:

  • For diagram nodes or charts only.
  • If users need to stay in a certain context.
  • To offer actions that appear when an object is selected.
  • To show actions as close to their corresponding controls as possible.

Don't

Don’t use the context toolbar:

  • To provide a list of items or data points that can be selected, but don’t trigger actions. Use a list instead.
  • If users would benefit more from a split button, which offers an easy-to-access default action, with the option to select other actions.

Anatomy

  1. Icon Button: Icon button that triggers an action related to the selected node.
  2. Separator (Optional) : Provides visual separation between groups.

Context Toolbar anatomy diagram with two numbered callouts: callout 1 points to the first icon button at the left end of a horizontal toolbar containing 7 icon buttons; callout 2 points to the vertical divider that separates the first 5 buttons (primary actions) from the last 2 buttons (secondary actions).

Contextual Toolbar - Anatomy

Context Toolbar Types

Toolbar with Icon Buttons

Use this variant of the contextual toolbar in SAC, DSP, or BDC to display a set of actions that appear when selecting one or multiple nodes.

Two Context Toolbar variants using icon-only buttons. Left: a vertical toolbar with 7 icon buttons stacked in a single column, divided by a horizontal separator between the 5th and 6th buttons. Right: a horizontal toolbar with 7 icon buttons in a row, divided by a vertical separator between the 5th and 6th buttons.

Toolbar with Icon Buttons

Toolbar with Button Labels

Use this variant in Datasphere when dragging and dropping a node, no additional tooltips should be used. Warning: This drag and drop variant is currently not accessible.

Context Toolbar variant using labeled buttons. A vertical toolbar displays 4 items, each consisting of an icon followed by the text label "Button", showing the icon-plus-label button style.

Toolbar with Button Labels

Toolbar with Content

Use this variant in SAC to add additional information when selecting a data point on a chart.

Context Toolbar variant with a content slot. A card-shaped toolbar shows a data point title placeholder and a data point value placeholder at the top, a large highlighted swap slot region in the center (indicating a customizable content area), a horizontal divider, and a row of 4 icon buttons at the bottom.

Toolbar with Content

Behavior and Interaction

Icon Button Tooltips

All action buttons should have a tooltip appear on hover. All tooltips should follow the Tooltip Guidelines including:

Context Toolbar hover behavior diagram. A vertical toolbar with 5 icon buttons (Filter, Create Projection, Formula/fx, Create Aggregation, Open Data Viewr) is shown in context next to a selected TABLE_1 node. Callout 1 points to a tooltip reading "Filter" appearing above the first icon button, with a cursor in hover state over it, illustrating that icon buttons display a tooltip on hover.

Tooltip for Icon Button

Icons & Tooltips in DNA Design

Use the following list of existing icons and tooltips to ensure consistency across diagrams.

Reference table mapping existing toolbar actions to their icon, library source (SAP or FPA), icon name, and the diagrams in which each action appears.

Available icons for Context Toolbars across SAC, DSP, and BDC