Toolbar

A toolbar allows a user to manage and manipulate a data set. Data can be presented in any valid presentation, a table, a list, or a data visualization (chart), for example. The toolbar responsively accommodates controls and displays applied filters in chip groups.

Examples

Toolbar items

A toolbar can contain multiple toolbar items, like filters and buttons.

Note: This example does not demonstrate responsive toolbar behavior. Responsive toolbars are shown in the examples with toggle groups and filters.


Toolbar item spacers

You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.

Items are spaced “16px” apart by default via their parents' gap or columnGap property. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".



With adjusted inset

To adjust a toolbar’s inset, use the inset property. You can set the inset value at multiple breakpoints, including "default", "md", "lg, "xl", and "2xl". Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.



Sticky toolbar

To lock a toolbar and prevent it from scrolling with other content, use a sticky toolbar.

In the following example, toggle the "is toolbar sticky" checkbox to see the difference between a sticky and non-sticky toolbar.

  • item 0
  • item 2
  • item 4
  • item 6
  • item 8
  • item 10
  • item 12
  • item 14
  • item 16
  • item 18
  • item 20
  • item 22
  • item 24
  • item 26
  • item 28

With groups of items

You can group similar items together to create desired associations and to enable items to respond to changes in viewport width together.

Note: This example does not demonstrate responsive toolbar behavior. Responsive toolbars are shown in the examples with toggle groups and filters.

Examples with toggle groups and filters

The following examples use toggle groups to allow for more responsive and complex toolbars with multiple items and groups of items. To visualize responsive toolbar behavior in the following examples, resize the browser to a smaller screen width.

Component managed toggle groups

A toggle group allows you to collapse a set of items into an overlay panel at a certain breakpoint. For example, when a toggle group contains filter controls, its contents will collapse into an overlay panel when the toolbar adapts to a change in the viewport size. The contents can be toggled by selecting the filter icon in the overlay panel.

Consumer managed toggle groups

To manually create the expanded state of the toggle group for smaller screen widths:

  1. Add a toggleIsExpanded callback to the toolbar
  2. Pass a boolean into the isExpanded property of the toolbar

Note: The toggle group is aware of the consumer provided breakpoint, the expandable content is not. If the expandable content is expanded and the screen width surpasses that of the breakpoint, the expandable content is not aware of that and will remain open. Be sure to consider and handle this in your implementation.

With filters

You can add filters to a toolbar to let users filter the content that a toolbar manages. When a toolbar is filtered, it will expand in height to make space for a row of filter chips and a "Clear all filters" button. Upon clearing the applied filters, the toolbar will return to its default height.

The <ToolbarFilter> component expects applied filters and a delete chip handler to be passed in as properties. Pass in a deleteChipGroup property to close the entire chip group. Once close, the rendering of chips will be handled responsively by the toolbar.

With custom chip group content

To customize the chip groups generated by toolbar filters, use the customChipGroupContent property on the <Toolbar>. This property will remove the default clear all filters button.

Stacked example

Untitled example


1 - 20 of 37

Background color variants

To change the background color of a toolbar, use the colorVariant property on the <Toolbar>.

No background

Primary background

Secondary background

Props

Toolbar

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent to be rendered as rows in the data toolbar
classNamestringClasses applied to root element of the data toolbar
clearAllFilters() => voidOptional callback for clearing all filters in the toolbar
clearFiltersButtonTextstringText to display in the clear all filters button
collapseListedFiltersBreakpoint'all' | 'md' | 'lg' | 'xl' | '2xl'The breakpoint at which the listed filters in chip groups are collapsed down to a summary
colorVariantToolbarColorVariant | 'default' | 'no-background' | 'primary' | 'secondary'Background color variant of the toolbar
customChipGroupContentReact.ReactNodeCustom content appended to the filter generated chip group. To maintain spacing and styling, each node should be wrapped in a ToolbarItem or ToolbarGroup. This property will remove the default "Clear all filters" button.
idstringId of the data toolbar
inset{ default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; sm?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; md?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; lg?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; }Insets at various breakpoints.
isExpandedbooleanFlag indicating if a data toolbar toggle group's expandable content is expanded
isFullHeightbooleanFlag indicating the toolbar height should expand to the full height of the container
isStaticbooleanFlag indicating the toolbar is static
isStickybooleanFlag indicating the toolbar should stick to the top of its container
numberOfFiltersText(numberOfFilters: number) => stringText to display in the total number of applied filters ToolbarFilter
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
toggleIsExpanded() => voidA callback for setting the isExpanded flag
usePageInsetsbooleanFlag indicating the toolbar should use the Page insets

ToolbarContent

*required
NameTypeDefaultDescription
alignItems'start' | 'center' | 'baseline' | 'default'Vertical alignment of children
alignSelf'start' | 'center' | 'baseline' | 'default'Vertical alignment.
childrenReact.ReactNodeContent to be rendered as children of the content row
classNamestringClasses applied to root element of the data toolbar content row
clearAllFilters() => voidOptional callback for clearing all filters in the toolbar
clearFiltersButtonTextstringText to display in the clear all filters button
isExpandedbooleanfalseFlag indicating if a data toolbar toggle group's expandable content is expanded
showClearFiltersButtonbooleanfalseFlag indicating that the clear all filters button should be visible
toolbarIdstringId of the parent Toolbar component
visibility{ default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }Visibility at various breakpoints.

ToolbarGroup

*required
NameTypeDefaultDescription
align{ default?: 'alignEnd' | 'alignStart'; md?: 'alignEnd' | 'alignStart'; lg?: 'alignEnd' | 'alignStart'; xl?: 'alignEnd' | 'alignStart'; '2xl'?: 'alignEnd' | 'alignStart'; }Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis
alignItems'start' | 'center' | 'baseline' | 'default'Vertical alignment of children
alignSelf'start' | 'center' | 'baseline' | 'default'Vertical alignment
childrenReact.ReactNodeContent to be rendered inside the data toolbar group
classNamestringClasses applied to root element of the data toolbar group
columnGap{ default?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; md?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; lg?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; xl?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; '2xl'?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; }Sets only the column gap at various breakpoints.
gap{ default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; }Sets both the column and row gap at various breakpoints.
isOverflowContainerbooleanFlag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation.
rowGap{ default?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; md?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; lg?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; xl?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; '2xl'?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; }Sets only the row gap at various breakpoints.
variantToolbarGroupVariant | 'filter-group' | 'icon-button-group'A type modifier which modifies spacing specifically depending on the type of group
visibility{ default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }Visibility at various breakpoints.

ToolbarItem

*required
NameTypeDefaultDescription
align{ default?: 'alignEnd' | 'alignStart'; md?: 'alignEnd' | 'alignStart'; lg?: 'alignEnd' | 'alignStart'; xl?: 'alignEnd' | 'alignStart'; '2xl'?: 'alignEnd' | 'alignStart'; }Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis
alignItems'start' | 'center' | 'baseline' | 'default'Vertical alignment of children
alignSelf'start' | 'center' | 'baseline' | 'default'Vertical alignment
childrenReact.ReactNodeContent to be rendered inside the data toolbar item
classNamestringClasses applied to root element of the data toolbar item
columnGap{ default?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; md?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; lg?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; xl?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; '2xl'?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; }Sets only the column gap at various breakpoints.
gap{ default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; }Sets both the column and row gap at various breakpoints.
idstringid for this data toolbar item
isAllExpandedbooleanFlag indicating if the expand-all variant is expanded or not
isOverflowContainerbooleanFlag that modifies the toolbar item to hide overflow and respond to available space. Used for horizontal navigation.
rowGap{ default?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; md?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; lg?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; xl?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; '2xl'?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; }Sets only the row gap at various breakpoints.
variantToolbarItemVariant | 'pagination' | 'label' | 'chip-group' | 'separator' | 'expand-all'A type modifier which modifies spacing specifically depending on the type of item
visibility{ default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }Visibility at various breakpoints.

ToolbarToggleGroup

*required
NameTypeDefaultDescription
breakpointrequired'md' | 'lg' | 'xl' | '2xl'Controls when filters are shown and when the toggle button is hidden.
toggleIconrequiredReact.ReactNodeAn icon to be rendered when the toggle group has collapsed down
alignment{ default?: 'alignEnd' | 'alignStart'; md?: 'alignEnd' | 'alignStart'; lg?: 'alignEnd' | 'alignStart'; xl?: 'alignEnd' | 'alignStart'; '2xl'?: 'alignEnd' | 'alignStart'; }Alignment at various breakpoints.
chipContainerRefReact.RefObject<any>Reference to a chip container group for filters inside the toolbar toggle group
clearAllFilters() => voidOptional callback for clearing all filters in the toolbar toggle group
clearFiltersButtonTextstringText to display in the clear all filters button of the toolbar toggle group
columnGap{ default?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; md?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; lg?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; xl?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; '2xl'?: | 'columnGapNone' | 'columnGapXs' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap_2xl' | 'columnGap_3xl' | 'columnGap_4xl'; }Sets only the column gap at various breakpoints.
gap{ default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; }Sets both the column and row gap at various breakpoints.
isExpandedbooleanFlag indicating when toggle group is expanded for non-managed toolbar toggle groups.
onToggle(event: React.MouseEvent) => voidCallback for toggle group click event for non-managed toolbar toggle groups.
rowGap{ default?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; md?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; lg?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; xl?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; '2xl'?: | 'rowGapNone' | 'rowGapXs' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap_2xl' | 'rowGap_3xl' | 'rowGap_4xl'; }Sets only the row gap at various breakpoints.
showClearFiltersButtonbooleanFlag indicating that the clear all filters button should be visible in the toolbar toggle group
visibility{ default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }Visibility at various breakpoints.

ToolbarFilter

*required
NameTypeDefaultDescription
categoryNamerequiredstring | ToolbarChipGroupUnique category name to be used as a label for the chip group
childrenrequiredReact.ReactNodeContent to be rendered inside the data toolbar item associated with the chip group
chipGroupCollapsedTextstringCustomizeable template string for the chip group. Use variable "${remaining}" for the overflow chip count.
chipGroupExpandedTextstringCustomizable "Show Less" text string for the chip group
chips(string | ToolbarChip)[][]An array of strings to be displayed as chips in the expandable content
deleteChip(category: string | ToolbarChipGroup, chip: ToolbarChip | string) => voidCallback passed by consumer used to delete a chip from the chips[]
deleteChipGroup(category: string | ToolbarChipGroup) => voidCallback passed by consumer used to close the entire chip group
expandableChipContainerRefReact.RefObject<HTMLDivElement>Reference to a chip container created with a custom expandable content group, for non-managed multiple toolbar toggle groups.
isExpandedbooleanFlag indicating when toolbar toggle group is expanded for non-managed toolbar toggle groups.
showToolbarItembooleantrueFlag to show the toolbar item

CSS variables

Expand or collapse columnSelectorVariableValue

View source on GitHub