Skip to content
Patternfly Logo

Toolbar

Examples

Items

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.)


Adjusting item spacers



Adjusting item widths

Adjusting toolbar inset



Sticky

  • 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

Groups

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.)

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.

Component managed toggle groups

Consumer managed toggle groups

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.

With filters

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.

With custom chip group content

The chip groups generated by toolbar filters may be further customized through the customChipGroupContent property, which will append to the filter chip groups. This property will remove the default Clear all filters button.

Stacked example

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


1 - 20 of 37
1 - 20 of 37

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
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
toggleIsExpanded() => voidA callback for setting the isExpanded flag
usePageInsetsbooleanFlag indicating the toolbar should use the Page insets

ToolbarContent

*required
NameTypeDefaultDescription
alignment{ default?: 'alignRight' | 'alignLeft'; md?: 'alignRight' | 'alignLeft'; lg?: 'alignRight' | 'alignLeft'; xl?: 'alignRight' | 'alignLeft'; '2xl'?: 'alignRight' | 'alignLeft'; }Alignment at various breakpoints.
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.
Deprecated: visiblity{ default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }prop misspelled

ToolbarGroup

*required
NameTypeDefaultDescription
alignment{ default?: 'alignRight' | 'alignLeft'; md?: 'alignRight' | 'alignLeft'; lg?: 'alignRight' | 'alignLeft'; xl?: 'alignRight' | 'alignLeft'; '2xl'?: 'alignRight' | 'alignLeft'; }Alignment at various breakpoints.
childrenReact.ReactNodeContent to be rendered inside the data toolbar group
classNamestringClasses applied to root element of the data toolbar group
innerRefReact.RefObject<any>Reference to pass to this group if it has .pf-m-chip-container modifier
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'; }Space items 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'; }Spacers at various breakpoints.
variantToolbarGroupVariant | 'filter-group' | 'icon-button-group' | '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.
Deprecated: visiblity{ default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }prop misspelled

ToolbarItem

*required
NameTypeDefaultDescription
alignment{ default?: 'alignRight' | 'alignLeft'; md?: 'alignRight' | 'alignLeft'; lg?: 'alignRight' | 'alignLeft'; xl?: 'alignRight' | 'alignLeft'; '2xl'?: 'alignRight' | 'alignLeft'; }Alignment at various breakpoints.
childrenReact.ReactNodeContent to be rendered inside the data toolbar item
classNamestringClasses applied to root element of the data toolbar item
idstringid for this data toolbar item
isAllExpandedbooleanFlag indicating if the expand-all variant is expanded or not
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'; }Spacers at various breakpoints.
variantToolbarItemVariant | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter' | '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.
Deprecated: visiblity{ default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }prop misspelled
widths{ default?: string; sm?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; }Widths 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?: 'alignRight' | 'alignLeft'; md?: 'alignRight' | 'alignLeft'; lg?: 'alignRight' | 'alignLeft'; xl?: 'alignRight' | 'alignLeft'; '2xl'?: 'alignRight' | 'alignLeft'; }Alignment 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'; }Space items 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'; }Spacers at various breakpoints.
visibility{ default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }Visibility at various breakpoints.
Deprecated: visiblity{ default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; lg?: 'hidden' | 'visible'; xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }prop misspelled

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
showToolbarItembooleantrueFlag to show the toolbar item

CSS variables

.pf-c-toolbar__content-section--pf-hidden-visible--visible--Visibility
visible
.pf-c-toolbar__content-section--pf-hidden-visible--hidden--Display
none
.pf-c-toolbar__content-section--pf-hidden-visible--hidden--Visibility
hidden
.pf-c-toolbar__content-section--pf-hidden-visible--Display
flex
.pf-c-toolbar__content-section--pf-hidden-visible--Visibility
visible
.pf-c-toolbar__content-section--pf-hidden-visible--visible--Display
flex
.pf-m-hidden.pf-c-toolbar__content-section--pf-hidden-visible--Display
none
.pf-m-hidden.pf-c-toolbar__content-section--pf-hidden-visible--Visibility
hidden
.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__item--Display
block
.pf-c-toolbar--pf-c-toolbar__item--MinWidth--base
auto
.pf-c-toolbar--pf-c-toolbar__group--Display
flex
.pf-c-toolbar--pf-c-toolbar--m-sticky--ZIndex
100
.pf-c-toolbar--pf-c-toolbar--m-sticky--BoxShadow
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-toolbar--pf-c-toolbar__content--Display
flex
.pf-c-toolbar--pf-c-toolbar__content--PaddingRight
1rem
.pf-c-toolbar--pf-c-toolbar__content--PaddingLeft
1rem
.pf-c-toolbar--pf-c-toolbar__content-section--Display
flex
.pf-c-toolbar--pf-c-toolbar--m-page-insets--inset
1rem
.pf-c-toolbar--pf-c-toolbar--m-page-insets--xl--inset
1.5rem
.pf-c-toolbar--pf-c-toolbar__expandable-content--Display
grid
.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
200
.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__item--Width
auto
.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__expand-all-icon--Rotate
0
.pf-c-toolbar--pf-c-toolbar__expand-all-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-toolbar--pf-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate
90deg
.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__expandable-content__item--m-label--MarginBottom
calc(-1 * 1.5rem + 0.5rem)
.pf-c-toolbar--pf-c-toolbar__expandable-content__item--m-label--FontSize
0.875rem
.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--pf-c-toolbar--m-full-height--PaddingTop
0
.pf-c-toolbar--pf-c-toolbar--m-full-height--PaddingBottom
0
.pf-c-toolbar--pf-c-toolbar--m-full-height__item--Display
flex
.pf-c-toolbar--pf-c-toolbar--m-full-height__item--AlignItems
center
.pf-c-toolbar.pf-m-page-insets--pf-c-toolbar__content--PaddingRight
1rem
.pf-c-toolbar.pf-m-page-insets--pf-c-toolbar__content--PaddingLeft
1rem
.pf-c-toolbar.pf-m-full-height--pf-c-toolbar--PaddingTop
0
.pf-c-toolbar.pf-m-full-height--pf-c-toolbar--PaddingBottom
0
.pf-c-toolbar.pf-m-full-height--pf-c-toolbar__item--Display
flex
.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-hidden-visible--visible--Display
flex
.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-c-toolbar__item--Width--base
auto
.pf-c-toolbar__item--pf-c-toolbar__item--MinWidth--base
undefined
.pf-c-toolbar__item--pf-hidden-visible--visible--Display
block
.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-expand-all.pf-m-expanded--pf-c-toolbar__expand-all-icon--Rotate
90deg
.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__content--pf-hidden-visible--visible--Display
flex
.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
.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.pf-m-inset-none--pf-c-toolbar--inset
0
.pf-c-toolbar.pf-m-inset-none--pf-c-toolbar__content--PaddingRight
0
.pf-c-toolbar.pf-m-inset-none--pf-c-toolbar__content--PaddingLeft
0
.pf-c-toolbar.pf-m-inset-sm--pf-c-toolbar--inset
0.5rem
.pf-c-toolbar.pf-m-inset-sm--pf-c-toolbar__content--PaddingRight
0.5rem
.pf-c-toolbar.pf-m-inset-sm--pf-c-toolbar__content--PaddingLeft
0.5rem
.pf-c-toolbar.pf-m-inset-md--pf-c-toolbar--inset
1rem
.pf-c-toolbar.pf-m-inset-md--pf-c-toolbar__content--PaddingRight
1rem
.pf-c-toolbar.pf-m-inset-md--pf-c-toolbar__content--PaddingLeft
1rem
.pf-c-toolbar.pf-m-inset-lg--pf-c-toolbar--inset
1.5rem
.pf-c-toolbar.pf-m-inset-lg--pf-c-toolbar__content--PaddingRight
1.5rem
.pf-c-toolbar.pf-m-inset-lg--pf-c-toolbar__content--PaddingLeft
1.5rem
.pf-c-toolbar.pf-m-inset-xl--pf-c-toolbar--inset
2rem
.pf-c-toolbar.pf-m-inset-xl--pf-c-toolbar__content--PaddingRight
2rem
.pf-c-toolbar.pf-m-inset-xl--pf-c-toolbar__content--PaddingLeft
2rem
.pf-c-toolbar.pf-m-inset-2xl--pf-c-toolbar--inset
3rem
.pf-c-toolbar.pf-m-inset-2xl--pf-c-toolbar__content--PaddingRight
3rem
.pf-c-toolbar.pf-m-inset-2xl--pf-c-toolbar__content--PaddingLeft
3rem
.pf-c-toolbar__content-section > :last-child--pf-c-toolbar--spacer
0

View source on GitHub