Skip to Content
Patternfly Logo

Toolbar

ExamplesExamples with toggle groups and filtersPropsCSS Variables

Examples

Toolbar items are individual components that can be placed inside of a toolbar. Buttons or select lists are examples of items. (Note: This example does not demonstrate the desired responsive behavior of the toolbar. That is handled in later examples.)

Items


Adjusting item spacers



Often, it makes sense to group sets of like items to create desired associations and to enable items to respond together to changes in viewport width. (Note: This example does not demonstrate the desired responsive behavior of the toolbar. That is handled in later examples.)

Groups

Examples with toggle groups and filters

A toggle group can be used when you want to collapse a set of items into an overlay panel at a certain breakpoint. This allows complex toolbars with multiple items and groups of items to be responsive. A toggle group is useful for containing filter controls, for example. When the toolbar responds to adapt to a mobile viewport, the contents contained in a toggle group will collapse into an overlay panel that can be toggled by clicking the Filter icon.

The Toggle group can either have the toggle state managed by the consumer, or the component.

  • The first Toggle group example below demonstrates a component managed toggle state.

Component managed toggle groups

The second Toggle group example below demonstrates a consumer managed toggle state. If the consumer would prefer to manage the expanded state of the toggle group for smaller screen widths:

  1. Add a toggleIsExpanded callback to Toolbar
  2. Pass in a boolean into the isExpanded prop to Toolbar
  • Note: Although the toggle group is aware of the consumer provided breakpoint, the expandable content is not. So if the expandable content is expanded and the screen width surpasses that of the breakpoint, then the expandable content will not know that and will remain open, this case should be considered and handled by the consumer as well.

Consumer managed toggle groups

The ToolbarFilter component expects a consumer managed list of applied filters and a delete chip handler to be passed as props. Pass a deleteChipGroup prop to provide both a handler and visual styling to remove all chips in a group. Then the rendering of chips will be handled responsively by the Toolbar When filters are applied, the toolbar will expand in height to make space for a row of filter chips. Upon clearing the applied filters, the toolbar will collapse to its default height.

Data toolbar with filters

There may be situations where all of the required elements simply cannot fit in a single line.

Stacked example

Overflow Menu

1 - 20 of 37
1 - 20 of 37

Props

Toolbar properties
NameTypeRequiredDefaultDescription
clearAllFilters() => voidNoOptional callback for clearing all filters in the toolbar
clearFiltersButtonTextstringNoText to display in the clear all filters button
collapseListedFiltersBreakpoint'md' | 'lg' | 'xl' | '2xl'NoThe breakpoint at which the listed fitlers in chip groups are collapsed down to a summary
isExpandedbooleanNoFlag indicating if a data toolbar toggle group's expandable content is expanded
toggleIsExpanded() => voidNoA callback for setting the isExpanded flag
classNamestringNoClasses applied to root element of the data toolbar
childrenReact.ReactNodeNoContent to be rendered as rows in the data toolbar
idstringNoId of the data toolbar
ToolbarContent properties
NameTypeRequiredDefaultDescription
classNamestringNoClasses applied to root element of the data toolbar content row
visiblity{ default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }NoVisibility at various breakpoints.
alignment{ default?: 'alignRight' | 'alignLeft'; md?: 'alignRight' | 'alignLeft'; lg?: 'alignRight' | 'alignLeft'; xl?: 'alignRight' | 'alignLeft'; '2xl'?: 'alignRight' | 'alignLeft'; }NoAlignment at various breakpoints.
childrenReact.ReactNodeNoContent to be rendered as children of the content row
isExpandedbooleanNofalseFlag indicating if a data toolbar toggle group's expandable content is expanded
clearAllFilters() => voidNoOptional callback for clearing all filters in the toolbar
showClearFiltersButtonbooleanNofalseFlag indicating that the clear all filters button should be visible
clearFiltersButtonTextstringNoText to display in the clear all filters button
toolbarIdstringNoId of the parent Toolbar component
ToolbarItem properties
NameTypeRequiredDefaultDescription
classNamestringNoClasses applied to root element of the data toolbar item
variantToolbarItemVariant | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter' | 'label' | 'chip-group' | 'separator'NoA type modifier which modifies spacing specifically depending on the type of item
visiblity{ default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }NoVisibility at various breakpoints.
alignment{ default?: 'alignRight' | 'alignLeft'; md?: 'alignRight' | 'alignLeft'; lg?: 'alignRight' | 'alignLeft'; xl?: 'alignRight' | 'alignLeft'; '2xl'?: 'alignRight' | 'alignLeft'; }NoAlignment at various breakpoints.
spacer{ default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg'; md?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg'; lg?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg'; xl?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg'; '2xl'?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg'; }NoSpacers at various breakpoints.
idstringNoid for this data toolbar item
childrenReact.ReactNodeNoContent to be rendered inside the data toolbar item
ToolbarToggleGroup properties
NameTypeRequiredDefaultDescription
toggleIconReact.ReactNodeYesAn icon to be rendered when the toggle group has collapsed down
breakpoint'md' | 'lg' | 'xl' | '2xl'YesControls when filters are shown and when the toggle button is hidden.
visiblity{ default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }NoVisibility at various breakpoints.
alignment{ default?: 'alignRight' | 'alignLeft'; md?: 'alignRight' | 'alignLeft'; lg?: 'alignRight' | 'alignLeft'; xl?: 'alignRight' | 'alignLeft'; '2xl'?: 'alignRight' | 'alignLeft'; }NoAlignment at various breakpoints.
spacer{ default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg'; md?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg'; lg?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg'; xl?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg'; '2xl'?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg'; }NoSpacers at various breakpoints.
spaceItems{ default?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg'; md?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg'; lg?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg'; xl?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg'; '2xl'?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg'; }NoSpace items at various breakpoints.
ToolbarFilter properties
NameTypeRequiredDefaultDescription
chips(string | ToolbarChip)[]No[]An array of strings to be displayed as chips in the expandable content
deleteChipGroup(category: string | ToolbarChipGroup) => voidNoCallback passed by consumer used to close the entire chip group
deleteChip(category: string | ToolbarChipGroup, chip: ToolbarChip | string) => voidNoCallback passed by consumer used to delete a chip from the chips[]
childrenReact.ReactNodeYesContent to be rendered inside the data toolbar item associated with the chip group
categoryNamestring | ToolbarChipGroupYesUnique category name to be used as a label for the chip group
showToolbarItembooleanNotrueFlag to show the toolbar item

CSS Variables

.pf-c-toolbar--pf-c-toolbar--BackgroundColor
#fff
.pf-c-toolbar--pf-c-toolbar--RowGap
1.5rem
.pf-c-toolbar--pf-c-toolbar--PaddingTop
1rem
.pf-c-toolbar--pf-c-toolbar--PaddingBottom
1rem
.pf-c-toolbar--pf-c-toolbar__content--PaddingRight
1rem
.pf-c-toolbar--pf-c-toolbar__content--PaddingLeft
1rem
.pf-c-toolbar--pf-c-toolbar__expandable-content--PaddingTop
1.5rem
.pf-c-toolbar--pf-c-toolbar__expandable-content--PaddingRight
1rem
.pf-c-toolbar--pf-c-toolbar__expandable-content--PaddingBottom
1rem
.pf-c-toolbar--pf-c-toolbar__expandable-content--PaddingLeft
1rem
.pf-c-toolbar--pf-c-toolbar__expandable-content--lg--PaddingRight
0
.pf-c-toolbar--pf-c-toolbar__expandable-content--lg--PaddingBottom
0
.pf-c-toolbar--pf-c-toolbar__expandable-content--lg--PaddingLeft
0
.pf-c-toolbar--pf-c-toolbar__expandable-content--ZIndex
100
.pf-c-toolbar--pf-c-toolbar__expandable-content--BoxShadow
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
.pf-c-toolbar--pf-c-toolbar__expandable-content--BackgroundColor
#fff
.pf-c-toolbar--pf-c-toolbar__expandable-content--m-expanded--GridRowGap
1.5rem
.pf-c-toolbar--pf-c-toolbar__group--m-chip-container--MarginTop
calc(1rem * -1)
.pf-c-toolbar--pf-c-toolbar__group--m-chip-container__item--MarginTop
1rem
.pf-c-toolbar--pf-c-toolbar--spacer--base
1rem
.pf-c-toolbar--pf-c-toolbar__item--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__group--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__group--m-toggle-group--spacer
0.5rem
.pf-c-toolbar--pf-c-toolbar__group--m-toggle-group--m-show--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__group--m-icon-button-group--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__group--m-icon-button-group--space-items
0
.pf-c-toolbar--pf-c-toolbar__group--m-button-group--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__group--m-button-group--space-items
0.5rem
.pf-c-toolbar--pf-c-toolbar__group--m-filter-group--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__group--m-filter-group--space-items
0
.pf-c-toolbar--pf-c-toolbar__item--m-overflow-menu--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__item--m-bulk-select--spacer
1.5rem
.pf-c-toolbar--pf-c-toolbar__item--m-search-filter--spacer
0.5rem
.pf-c-toolbar--pf-c-toolbar__item--m-chip-group--spacer
0.5rem
.pf-c-toolbar--pf-c-toolbar__item--m-label--spacer
1rem
.pf-c-toolbar--pf-c-toolbar__item--m-label--FontWeight
700
.pf-c-toolbar--pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color
#151515
.pf-c-toolbar--pf-c-toolbar--c-divider--m-vertical--spacer
1rem
.pf-c-toolbar__content-section > .pf-c-divider--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__content-section > .pf-c-divider.pf-m-vertical:last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar__group--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__group.pf-m-button-group--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__group.pf-m-button-group > *--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar__group.pf-m-icon-button-group--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__group.pf-m-icon-button-group > *--pf-c-toolbar--spacer
0
.pf-c-toolbar__group.pf-m-filter-group--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__group.pf-m-filter-group > *--pf-c-toolbar--spacer
0
.pf-c-toolbar__group.pf-m-toggle-group--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar__group:last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar__item--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__item.pf-m-overflow-menu--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__item.pf-m-bulk-select--pf-c-toolbar--spacer
1.5rem
.pf-c-toolbar__item.pf-m-search-filter--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar__item.pf-m-chip-group--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar__item.pf-m-label--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__item:last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar__expandable-content .pf-c-toolbar__group--pf-c-toolbar--spacer
0
.pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__item--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__group--pf-c-toolbar--spacer
1rem
.pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__group:last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-c-chip-group:last-child--pf-c-chip-group--MarginRight
0
.pf-c-toolbar .pf-c-chip-group li:last-child--pf-c-chip-group__li--m-toolbar--MarginRight
0
.pf-m-toggle-group.pf-m-show--pf-c-toolbar--spacer
1rem
.pf-c-toolbar .pf-m-space-items-none > *--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-space-items-none > :last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-space-items-sm > *--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar .pf-m-space-items-sm > :last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-space-items-md > *--pf-c-toolbar--spacer
1rem
.pf-c-toolbar .pf-m-space-items-md > :last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-space-items-lg > *--pf-c-toolbar--spacer
1.5rem
.pf-c-toolbar .pf-m-space-items-lg > :last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-spacer-none--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-spacer-none:last-child--pf-c-toolbar--spacer
0
.pf-c-toolbar .pf-m-spacer-sm--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar .pf-m-spacer-sm:last-child--pf-c-toolbar--spacer
0.5rem
.pf-c-toolbar .pf-m-spacer-md--pf-c-toolbar--spacer
1rem
.pf-c-toolbar .pf-m-spacer-md:last-child--pf-c-toolbar--spacer
1rem
.pf-c-toolbar .pf-m-spacer-lg--pf-c-toolbar--spacer
1.5rem
.pf-c-toolbar .pf-m-spacer-lg:last-child--pf-c-toolbar--spacer
1.5rem
.pf-c-toolbar__content-section > :last-child--pf-c-toolbar--spacer
0