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.)
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.
Consumer managed toggle groups
If the consumer would prefer to manage the expanded state of the toggle group for smaller screen widths:
- Add a toggleIsExpanded callback to Toolbar
- 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.
Props
Toolbar
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content to be rendered as rows in the data toolbar | |
| className | string | Classes applied to root element of the data toolbar | |
| clearAllFilters | () => void | Optional callback for clearing all filters in the toolbar | |
| clearFiltersButtonText | string | Text 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 | |
| customChipGroupContent | React.ReactNode | Custom 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. | |
| id | string | Id 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. | |
| isExpanded | boolean | Flag indicating if a data toolbar toggle group's expandable content is expanded | |
| isFullHeight | boolean | Flag indicating the toolbar height should expand to the full height of the container | |
| isStatic | boolean | Flag indicating the toolbar is static | |
| isSticky | boolean | Flag indicating the toolbar should stick to the top of its container | |
| numberOfFiltersText | (numberOfFilters: number) => string | Text to display in the total number of applied filters ToolbarFilter | |
| toggleIsExpanded | () => void | A callback for setting the isExpanded flag | |
| usePageInsets | boolean | Flag indicating the toolbar should use the Page insets |
ToolbarContent
| Name | Type | Default | Description |
|---|---|---|---|
| alignment | { default?: 'alignRight' | 'alignLeft'; md?: 'alignRight' | 'alignLeft'; lg?: 'alignRight' | 'alignLeft'; xl?: 'alignRight' | 'alignLeft'; '2xl'?: 'alignRight' | 'alignLeft'; } | Alignment at various breakpoints. | |
| children | React.ReactNode | Content to be rendered as children of the content row | |
| className | string | Classes applied to root element of the data toolbar content row | |
| clearAllFilters | () => void | Optional callback for clearing all filters in the toolbar | |
| clearFiltersButtonText | string | Text to display in the clear all filters button | |
| isExpanded | boolean | false | Flag indicating if a data toolbar toggle group's expandable content is expanded |
| showClearFiltersButton | boolean | false | Flag indicating that the clear all filters button should be visible |
| toolbarId | string | Id 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
| Name | Type | Default | Description |
|---|---|---|---|
| alignment | { default?: 'alignRight' | 'alignLeft'; md?: 'alignRight' | 'alignLeft'; lg?: 'alignRight' | 'alignLeft'; xl?: 'alignRight' | 'alignLeft'; '2xl'?: 'alignRight' | 'alignLeft'; } | Alignment at various breakpoints. | |
| children | React.ReactNode | Content to be rendered inside the data toolbar group | |
| className | string | Classes applied to root element of the data toolbar group | |
| innerRef | React.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. | |
| variant | ToolbarGroupVariant | '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
| Name | Type | Default | Description |
|---|---|---|---|
| alignment | { default?: 'alignRight' | 'alignLeft'; md?: 'alignRight' | 'alignLeft'; lg?: 'alignRight' | 'alignLeft'; xl?: 'alignRight' | 'alignLeft'; '2xl'?: 'alignRight' | 'alignLeft'; } | Alignment at various breakpoints. | |
| children | React.ReactNode | Content to be rendered inside the data toolbar item | |
| className | string | Classes applied to root element of the data toolbar item | |
| id | string | id for this data toolbar item | |
| isAllExpanded | boolean | Flag 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. | |
| variant | ToolbarItemVariant | '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
| Name | Type | Default | Description |
|---|---|---|---|
| breakpointrequired | 'md' | 'lg' | 'xl' | '2xl' | Controls when filters are shown and when the toggle button is hidden. | |
| toggleIconrequired | React.ReactNode | An 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
| Name | Type | Default | Description |
|---|---|---|---|
| categoryNamerequired | string | ToolbarChipGroup | Unique category name to be used as a label for the chip group | |
| childrenrequired | React.ReactNode | Content to be rendered inside the data toolbar item associated with the chip group | |
| chipGroupCollapsedText | string | Customizeable template string for the chip group. Use variable "${remaining}" for the overflow chip count. | |
| chipGroupExpandedText | string | Customizable "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) => void | Callback passed by consumer used to delete a chip from the chips[] | |
| deleteChipGroup | (category: string | ToolbarChipGroup) => void | Callback passed by consumer used to close the entire chip group | |
| showToolbarItem | boolean | true | Flag 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
