Toolbar

COMPONENTS

Toolbar is a container that displays tools that can control another component.

View GSUI Toolkit Documentation (Internal Only)

Toolbar is container with responsive logic built-in that holds tools. Toolbar has advanced configurations available in a settings modal.

Toolbar Container
Widget Tool
Shortcut Button

Variations

Toolbar is currently available to pair with with Grid or Charts.

Behaviors

Adaptive Display

Toolbar is built to have adaptive behavior for all tools displayed. At smaller screen sizes, larger components, called widgets, adapt to icon-only buttons, called shortcuts.

All tools within the toolbar can flow into an overflow menu when space does not allow for all tools to be displayed in the horizontal space available.

Toolbar layout settings allow the end user to control which tools are visible in the toolbar and in which order they appear.

Sizes

Toolbar can be displayed in three sizes — large, medium, and small. The size defines the size of inner components that will be shown. A small toolbar will pull in small sized buttons.

Density

Density controls the amount of padding around the inner components of the toolbar and can be set to one of three options — standard, compact and extra-compact. Density is paired with size property to create the final display height of the toolbar.

Grid

The data grid is an interactive tabular interface and is one of the most important and complex patterns in the Goldman Sachs Design System.

Charts

Charts visualize and synthesize complex datasets and they are key elements of most applications that are built at Goldman Sachs.

Contents