Skip to content
PatternFly

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.

Introduction

Toolbar relies on groups (.pf-v5-c-toolbar__group) and items (.pf-v5-c-toolbar__item), with default spacer values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group or item. Each modifier applies a unique CSS variable, therefore, the base spacer value for all elements can be customized and item/groups spacers can be themed individually. The default spacer value for items and groups is set to --pf-v5-c-toolbar--spacer--base, whose value is --pf-v5-global--spacer--md or 16px.

Default spacing for items and groups:

Class
CSS Variable
Computed Value
.pf-v5-c-toolbar__item
--pf-v5-c-toolbar__item--spacer
16px
.pf-v5-c-toolbar__group
--pf-v5-c-toolbar__group--spacer
16px

Toolbar item types

Class
Applied to
Outcome
.pf-m-bulk-select
.pf-v5-c-toolbar__item
Initiates bulk select spacing. Spacer value is set to var(--pf-v5-c-toolbar--m-bulk-select--spacer).
.pf-m-overflow-menu
.pf-v5-c-toolbar__item
Initiates overflow menu spacing. Spacer value is set to var(--pf-v5-c-toolbar--m-overflow-menu--spacer).
.pf-m-pagination
.pf-v5-c-toolbar__item
Initiates pagination spacing and margin. Spacer value is set to var(--pf-v5-c-toolbar--m-pagination--spacer).
.pf-m-search-filter
.pf-v5-c-toolbar__item
Initiates search filter spacing. Spacer value is set to var(--pf-v5-c-toolbar--m-search-filter--spacer).

Modifiers

Class
Applied to
Outcome
.pf-m-hidden{-on-[breakpoint]}
.pf-v5-c-toolbar > *
Modifies toolbar element to be hidden, at optional breakpoint.
.pf-m-visible{-on-[breakpoint]}
.pf-v5-c-toolbar > *
Modifies toolbar element to be shown, at optional breakpoint.
.pf-m-align-right{-on-[breakpoint]}
.pf-v5-c-toolbar > *
Modifies toolbar element to align right, at optional breakpoint.
.pf-m-align-left{-on-[breakpoint]}
.pf-v5-c-toolbar > *
Modifies toolbar element to align left, at optional breakpoint.
.pf-m-align-items-start
.pf-v5-c-toolbar__content-section, .pf-v5-c-toolbar__group, .pf-v5-c-toolbar__item
Modifies toolbar element to vertically align children to flex-start.
.pf-m-align-items-center
.pf-v5-c-toolbar__content-section, .pf-v5-c-toolbar__group, .pf-v5-c-toolbar__item
Modifies toolbar element to vertically align children to center.
.pf-m-align-items-baseline
.pf-v5-c-toolbar__content-section, .pf-v5-c-toolbar__group, .pf-v5-c-toolbar__item
Modifies toolbar group to vertically align children to baseline.
.pf-m-align-self-start
.pf-v5-c-toolbar__group, .pf-v5-c-toolbar__item
Modifies toolbar element to vertically align self to flex-start.
.pf-m-align-self-center
.pf-v5-c-toolbar__group, .pf-v5-c-toolbar__item
Modifies toolbar element to vertically align self to center.
.pf-m-align-self-baseline
.pf-v5-c-toolbar__group, .pf-v5-c-toolbar__item
Modifies toolbar element to vertically align self to baseline.

Special notes

Several components in the following examples do not include functional and/or accessibility specifications (for example .pf-v5-c-select, .pf-v5-c-options-menu). Rather, .pf-v5-c-toolbar focuses on functionality and accessibility specifications that apply to it only.

Available breakpoints are: -on-sm, -on-md, -on-lg, -on-xl, and -on-2xl.

Examples

Simple

Item
Item
Item
Item
Item
Item
Item
Item
Item

Item types

Class
Applied to
Outcome
.pf-v5-c-toolbar__item
<div>
Initiates the toolbar component item. Required
.pf-v5-c-toolbar__group
<div>
Initiates the toolbar component group.

Spacers

In some instances, it may be necessary to adjust spacing explicitly where items are hidden/shown. For example, if a .pf-m-toggle-group is adjacent to an element being hidden/shown, the spacing may appear to be inconsistent. If possible, rely on modifier values. Available spacer modifiers are .pf-m-spacer-{none, sm, md, lg}{-on-md, -on-lg, -on-xl} and .pf-m-space-items-{none, sm, md, lg}{-on-md, -on-lg, -on-xl}. These modifiers will overwrite existing modifiers provided by .pf-v5-c-toolbar.

Adjusted spacers

Item
Item
Item
Item
Item
Item

Adjusted group spacers

Item
Item
Item
Item

Insets

Item
Item
Item
Item

Page insets

Item
Item
Item
Item

Toolbar spacers and insets

Class
Applied to
Outcome
.pf-m-page-insets
.pf-v5-c-toolbar
Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from --pf-v5-global--spacer--md to --pf-v5-global--spacer--lg at the xl breakpoint.
.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}
.pf-v5-c-toolbar__group, .pf-v5-c-toolbar__item
Modifies toolbar group or item spacing at optional breakpoint.
.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}
.pf-v5-c-toolbar__group
Modifies toolbar group child spacing at optional breakpoint.
.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}
.pf-v5-c-toolbar
Modifies toolbar horizontal padding at optional breakpoint.

Width control

Item
Item
Item
Item

Width control usage

Class
Applied to
Outcome
--pf-v5-c-toolbar__item--Width{-on-[breakpoint]}: {width}
.pf-v5-c-toolbar__item
Modifies the width value of a toolbar item at optional breakpoint.
--pf-v5-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}
.pf-v5-c-toolbar__item
Modifies the min width value of a toolbar item at optional breakpoint.

Group types

Toolbar group types

Class
Applied to
Outcome
.pf-m-filter-group
.pf-v5-c-toolbar__group
Modifies toolbar group spacing. Spacer value is set to var(--pf-v5-c-toolbar__group--m-filter-group--spacer). Child spacer value is set to var(--pf-v5-c-toolbar__group--m-filter-group--space-items).
.pf-m-icon-button-group
.pf-v5-c-toolbar__group
Modifies toolbar group spacing. Spacer value is set to var(--pf-v5-c-toolbar__group--m-toggle-group--spacer). Child spacer value is set to var(--pf-v5-c-toolbar__group--m-icon-button-group--space-items).
.pf-m-button-group
.pf-v5-c-toolbar__group
Modifies toolbar group spacing. Spacer value is set to var(--pf-v5-c-toolbar__group--m-toggle-group--spacer). Child spacer value is set to var(--pf-v5-c-toolbar__group--m-button-group--space-items).

Toggle group

Toggle group on mobile (filters collapsed, expandable content expanded)

Toggle group modifier

The .pf-m-toggle-group controls when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. .pf-m-show-on-{md, lg, xl} controls when filters are shown and when the toggle button is hidden.

Accessibility

Attribute
Applied to
Outcome
hidden
.pf-v5-c-toolbar__item, .pf-v5-c-toolbar__group, .pf-v5-c-toolbar__toggle, .pf-v5-c-toolbar__expandable-content
Indicates that the toggle group element is hidden. Required
aria-expanded=true
.pf-v5-c-toolbar__toggle > .pf-v5-c-button
Indicates that the expandable content is visible. Required
aria-expanded="false"
.pf-v5-c-toolbar__toggle > .pf-v5-c-button
Indicates the the expandable content is hidden. Required
aria-controls="[id of expandable content]"
.pf-v5-c-toolbar__toggle > .pf-v5-c-button
Identifies the expanded content controlled by the toggle button. Required
id="[expandable-content_id]"
.pf-v5-c-toolbar__expandable-content
Provides a reference for toggle button description. Required

Responsive attributes

Attribute
Applied to
Outcome
aria-haspopup=true
.pf-v5-c-toolbar__toggle > .pf-v5-c-button
When expandable content appears above content (mobile viewport), aria-haspopup=true should be applied to indicate that focus should be trapped. Required

Usage

Class
Applied to
Outcome
.pf-m-show{-on-[breakpoint]}
.pf-v5-c-toolbar__group.pf-m-toggle-group, .pf-v5-c-toolbar__expandable-content
Modifies toolbar element visibility at optional breakpoint. This selector must be applied consistently to toggle group and expandable content.
.pf-m-chip-container
.pf-v5-c-toolbar__content-section, .pf-v5-c-toolbar__group
Modifies the toolbar element for applied filters layout.
.pf-m-expanded
.pf-v5-c-toolbar__expandable-content, .pf-v5-c-toolbar__toggle
Modifies the component for the expanded state.

Selected

Selected filters on mobile (filters collapsed, selected filters summary visible)

6 filters applied

Selected filters on mobile (filters collapsed, expandable content expanded)

Status
  • Chip one
  • Chip two
  • Chip three
Risk
  • Chip one
  • Chip two
  • Chip three

Selected filters on desktop (not responsive)

Status
  • Chip one
  • Chip two
  • Chip three
Risk
  • Chip one
  • Chip two
  • Chip three

Stacked

Stacked on desktop

37 items

Stacked on mobile (filters collapsed, expandable content expanded)

37 items

Documentation

Overview

As the toolbar component is a hybrid layout and component, some of its elements are presentational, while some require accessibility support.

Usage

Class
Applied to
Outcome
.pf-v5-c-toolbar
<div>
Initiates the toolbar component. Required
.pf-v5-c-toolbar__item
<div>
Initiates a toolbar item. Required
.pf-v5-c-toolbar__group
<div>
Initiates a toolbar group.
.pf-v5-c-toolbar__content
<div>
Initiates a toolbar content container. Required
.pf-v5-c-toolbar__content-section
<div>
Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one .pf-v5-c-toolbar__content-section per .pf-v5-c-toolbar__content Required
.pf-v5-c-toolbar__expandable-content
<div>
Initiates a toolbar expandable content section.
.pf-m-sticky
.pf-v5-c-toolbar
Modifies toolbar component to be sticky to the top of its container.
.pf-m-full-height
.pf-v5-c-toolbar, .pf-v5-c-toolbar__content-section, .pf-v5-c-toolbar__group
Modifies toolbar component to full height of its container and removes vertical padding.
.pf-m-static
.pf-v5-c-toolbar
Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar.
.pf-m-expanded
.pf-v5-c-toolbar__expandable-content
Modifies expandable content section for the expanded state.
.pf-m-label
.pf-v5-c-toolbar__item
Modifies label vertical positioning.
.pf-m-form-element
.pf-v5-c-toolbar__item
Modifies form element vertical positioning.
.pf-m-bulk-select
.pf-v5-c-toolbar__item
Modifies bulk select spacing.
.pf-m-overflow-menu
.pf-v5-c-toolbar__item
Modifies overflow menu spacing.
.pf-m-pagination
.pf-v5-c-toolbar__item
Modifies pagination spacing and margin.
.pf-m-search-filter
.pf-v5-c-toolbar__item
Modifies search filter spacing.
.pf-m-chip-group
.pf-v5-c-toolbar__item
Modifies chip group spacing.
.pf-m-expand-all
.pf-v5-c-toolbar__item
Modifies an item for an expand all button.
.pf-m-expanded
.pf-v5-c-toolbar__item.pf-m-expand-all
Modifies an expand all button for the expanded state.
.pf-m-button-group
.pf-v5-c-toolbar__group
Modifies button group spacing.
.pf-m-icon-button-group
.pf-v5-c-toolbar__group
Modifies icon button group spacing.
.pf-m-filter-group
.pf-v5-c-toolbar__group
Modifies filter group spacing.
.pf-m-hidden{-on-[breakpoint]}
.pf-v5-c-toolbar__content, .pf-v5-c-toolbar__content-section, .pf-v5-c-toolbar__item, .pf-v5-c-toolbar__group
Modifies toolbar element to be hidden, at optional breakpoint.
.pf-m-visible{-on-[breakpoint]}
.pf-v5-c-toolbar__content, .pf-v5-c-toolbar__content-section, .pf-v5-c-toolbar__item, .pf-v5-c-toolbar__group
Modifies toolbar element to be shown, at optional breakpoint.
.pf-m-align-right{-on-[breakpoint]}
.pf-v5-c-toolbar > *
Modifies toolbar element to align right, at optional breakpoint.
.pf-m-align-left{-on-[breakpoint]}
.pf-v5-c-toolbar > *
Modifies toolbar element to align left, at optional breakpoint.
.pf-m-align-items-center
.pf-v5-c-toolbar__content-section, .pf-v5-c-toolbar__group
Modifies toolbar element to vertically align children to center.
.pf-m-align-items-baseline
.pf-v5-c-toolbar__group
Modifies toolbar group to vertically align children to baseline.
.pf-m-align-self-center
.pf-v5-c-toolbar__group, .pf-v5-c-toolbar__item
Modifies toolbar element to vertically align self to center.
.pf-m-align-self-baseline
.pf-v5-c-toolbar__group, .pf-v5-c-toolbar__item
Modifies toolbar element to vertically align self to baseline.
.pf-m-chip-container
.pf-v5-c-toolbar__content, .pf-v5-c-toolbar__group
Modifies the toolbar element for applied filters layout.
.pf-m-overflow-container
.pf-v5-c-toolbar__item, .pf-v5-c-toolbar__group
Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation.
.pf-m-expanded
.pf-v5-c-toolbar__expandable-content, .pf-v5-c-toolbar__toggle
Modifies the component for the expanded state.
.pf-m-wrap
.pf-v5-c-toolbar, .pf-v5-c-toolbar__content-section, .pf-v5-c-toolbar__group
Modifies the toolbar element to wrap.
.pf-m-nowrap
.pf-v5-c-toolbar, .pf-v5-c-toolbar__group
Modifies the toolbar element to nowrap.

Accessibility

Attribute
Applied to
Outcome
hidden
.pf-v5-c-toolbar__item, .pf-v5-c-toolbar__group, .pf-v5-c-toolbar__toggle, .pf-v5-c-toolbar__expandable-content
Indicates that the toolbar element is hidden. Required
aria-expanded=true
.pf-v5-c-toolbar__toggle > .pf-v5-c-button
Indicates that the expandable content is visible. Required
aria-expanded="false"
.pf-v5-c-toolbar__toggle > .pf-v5-c-button
Indicates the the expandable content is hidden. Required
aria-controls="[id of expandable content]"
.pf-v5-c-toolbar__toggle > .pf-v5-c-button
Identifies the expanded content controlled by the toggle button. Required
id="[expandable-content_id]"
.pf-v5-c-toolbar__expandable-content
Provides a reference for toggle button description. Required
aria-label="Expand all"
.pf-v5-c-toolbar__item.pf-m-expand-all
Provides an accessible label for the expand all item button. Required
aria-label="Collapse all"
.pf-v5-c-toolbar__item.pf-m-expand-all.pf-m-expanded
Provides an accessible label for the expand all item button. Required

Toggle group usage

Class
Applied to
Outcome
.pf-m-toggle-group
.pf-v5-c-toolbar__group
Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached.
.pf-m-show{-on-[breakpoint]}
.pf-v5-c-toolbar__group.pf-m-toggle-group, .pf-v5-c-toolbar__expandable-content
Modifies toolbar element to hidden at optional breakpoint. This selector must be applied consistently to toggle group and expandable content.

Spacer system

Class
Applied to
Outcome
.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}
.pf-v5-c-toolbar__group, .pf-v5-c-toolbar__item
Modifies toolbar group or item spacing at optional breakpoint.
.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}
.pf-v5-c-toolbar__group
Modifies toolbar group child spacing at optional breakpoint.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-toolbar__content-section--pf-v5-hidden-visible--hidden--Display
none
.pf-v5-c-toolbar__content-section--pf-v5-hidden-visible--Display
flex
.pf-v5-c-toolbar__content-section--pf-v5-hidden-visible--visible--Display
flex
.pf-m-hidden.pf-v5-c-toolbar__content-section--pf-v5-hidden-visible--Display
none
.pf-v5-c-toolbar--pf-v5-c-toolbar--AlignItems--base
flex-start
.pf-v5-c-toolbar--pf-v5-c-toolbar--BackgroundColor
#fff
.pf-v5-c-toolbar--pf-v5-c-toolbar--RowGap--base
1.5rem
.pf-v5-c-toolbar--pf-v5-c-toolbar--RowGap
1.5rem
.pf-v5-c-toolbar--pf-v5-c-toolbar--PaddingTop
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar--PaddingBottom
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar--item--RowGap--base
0.25rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--Display
flex
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--MinWidth--base
auto
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--AlignItems
flex-start
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--AlignSelf
flex-start
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--Display
flex
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--RowGap
0.25rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--AlignItems
flex-start
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--AlignSelf
auto
.pf-v5-c-toolbar--pf-v5-c-toolbar--m-sticky--ZIndex
100
.pf-v5-c-toolbar--pf-v5-c-toolbar--m-sticky--BoxShadow
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-v5-c-toolbar--pf-v5-c-toolbar--m-align-items-center--AlignItems
center
.pf-v5-c-toolbar--pf-v5-c-toolbar--m-align-items-baseline--AlignItems
baseline
.pf-v5-c-toolbar--pf-v5-c-toolbar--m-align-self-center--AlignSelf
center
.pf-v5-c-toolbar--pf-v5-c-toolbar--m-align-self-baseline--AlignSelf
baseline
.pf-v5-c-toolbar--pf-v5-c-toolbar__content--Display
flex
.pf-v5-c-toolbar--pf-v5-c-toolbar__content--AlignItems
flex-start
.pf-v5-c-toolbar--pf-v5-c-toolbar__content--RowGap
1.5rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__content--PaddingRight
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__content--PaddingLeft
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__content-section--Display
flex
.pf-v5-c-toolbar--pf-v5-c-toolbar__content-section--AlignItems
flex-start
.pf-v5-c-toolbar--pf-v5-c-toolbar__content-section--RowGap
0.25rem
.pf-v5-c-toolbar--pf-v5-c-toolbar--m-page-insets--inset
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar--m-page-insets--xl--inset
1.5rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--Display
grid
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--PaddingTop
0
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--PaddingRight
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--PaddingBottom
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--PaddingLeft
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--lg--PaddingRight
0
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--lg--PaddingBottom
0
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--lg--PaddingLeft
0
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--ZIndex
200
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--BoxShadow
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--BackgroundColor
#fff
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--m-expanded--GridRowGap
1.5rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--m-chip-container--MarginTop
calc(1rem * -1)
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--m-chip-container__item--MarginTop
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar--spacer--base
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--spacer
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--Width
auto
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--spacer
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--m-toggle-group--spacer
0.5rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--m-toggle-group--m-show--spacer
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--m-icon-button-group--spacer
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--m-icon-button-group--space-items
0
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--m-button-group--spacer
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--m-button-group--space-items
0.5rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--m-filter-group--spacer
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__group--m-filter-group--space-items
0
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--m-overflow-menu--spacer
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--m-bulk-select--spacer
1.5rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__expand-all-icon--Rotate
0
.pf-v5-c-toolbar--pf-v5-c-toolbar__expand-all-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate
90deg
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--m-search-filter--spacer
0.5rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--m-chip-group--spacer
0.5rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--m-label--spacer
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--m-label--TranslateY
0.375rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--m-label--FontWeight
700
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--m-form-element--spacer
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--m-form-element--TranslateY
0.375rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--m-form-element--FontWeight
700
.pf-v5-c-toolbar--pf-v5-c-toolbar__item--m-form-control--TranslateY
0.375rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom
calc(-1 * 1.5rem + 0.5rem)
.pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content__item--m-label--FontSize
0.875rem
.pf-v5-c-toolbar--pf-v5-c-toolbar__toggle--m-expanded__c-button--m-plain--Color
#151515
.pf-v5-c-toolbar--pf-v5-c-toolbar--c-divider--m-vertical--spacer
1rem
.pf-v5-c-toolbar--pf-v5-c-toolbar--m-full-height--PaddingTop
0
.pf-v5-c-toolbar--pf-v5-c-toolbar--m-full-height--PaddingBottom
0
.pf-v5-c-toolbar--pf-v5-c-toolbar--m-full-height__item--Display
flex
.pf-v5-c-toolbar--pf-v5-c-toolbar--m-full-height__item--AlignItems
center
.pf-v5-c-toolbar.pf-m-page-insets--pf-v5-c-toolbar__content--PaddingRight
1rem
.pf-v5-c-toolbar.pf-m-page-insets--pf-v5-c-toolbar__content--PaddingLeft
1rem
.pf-v5-c-toolbar.pf-m-full-height--pf-v5-c-toolbar--PaddingTop
0
.pf-v5-c-toolbar.pf-m-full-height--pf-v5-c-toolbar--PaddingBottom
0
.pf-v5-c-toolbar.pf-m-full-height--pf-v5-c-toolbar__item--Display
flex
.pf-v5-c-toolbar.pf-m-full-height :where(.pf-v5-c-toolbar__item)--pf-v5-c-toolbar__item--AlignItems
center
.pf-v5-c-toolbar__content-section > .pf-v5-c-divider--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar__content-section > .pf-v5-c-divider.pf-m-vertical:last-child--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar__content-section.pf-m-align-items-center--pf-v5-c-toolbar__group--AlignItems
center
.pf-v5-c-toolbar__content-section.pf-m-align-items-center--pf-v5-c-toolbar__content-section--AlignItems
center
.pf-v5-c-toolbar__content-section.pf-m-align-items-baseline--pf-v5-c-toolbar__group--AlignItems
baseline
.pf-v5-c-toolbar__content-section.pf-m-align-self-center--pf-v5-c-toolbar__group--AlignSelf
undefined
.pf-v5-c-toolbar__content-section.pf-m-align-self-baseline--pf-v5-c-toolbar__group--AlignSelf
undefined
.pf-v5-c-toolbar__group--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar__group--pf-v5-hidden-visible--visible--Display
flex
.pf-v5-c-toolbar__group.pf-m-button-group--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar__group.pf-m-button-group > *--pf-v5-c-toolbar--spacer
0.5rem
.pf-v5-c-toolbar__group.pf-m-icon-button-group--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar__group.pf-m-icon-button-group > *--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar__group.pf-m-filter-group--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar__group.pf-m-filter-group > *--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar__group.pf-m-toggle-group--pf-v5-c-toolbar--spacer
0.5rem
.pf-v5-c-toolbar__group:last-child--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar__item--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar__item--pf-v5-c-toolbar__item--Width--base
auto
.pf-v5-c-toolbar__item--pf-v5-c-toolbar__item--MinWidth--base
undefined
.pf-v5-c-toolbar__item--pf-v5-hidden-visible--visible--Display
flex
.pf-v5-c-toolbar__item.pf-m-overflow-menu--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar__item.pf-m-bulk-select--pf-v5-c-toolbar--spacer
1.5rem
.pf-v5-c-toolbar__item.pf-m-expand-all.pf-m-expanded--pf-v5-c-toolbar__expand-all-icon--Rotate
90deg
.pf-v5-c-toolbar__item.pf-m-search-filter--pf-v5-c-toolbar--spacer
0.5rem
.pf-v5-c-toolbar__item.pf-m-chip-group--pf-v5-c-toolbar--spacer
0.5rem
.pf-v5-c-toolbar__item.pf-m-label--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar__item.pf-m-form-element--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar__item:last-child--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar__content--pf-v5-hidden-visible--visible--Display
flex
.pf-v5-c-toolbar__expandable-content .pf-v5-c-toolbar__group--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__item--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__item--pf-v5-c-toolbar__item--AlignSelf
auto
.pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__group--pf-v5-c-toolbar__group--AlignItems
center
.pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__group--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__group:last-child--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar .pf-v5-c-chip-group:last-child--pf-v5-c-chip-group--MarginRight
0
.pf-v5-c-toolbar .pf-v5-c-chip-group li:last-child--pf-v5-c-chip-group__li--m-toolbar--MarginRight
0
.pf-m-toggle-group.pf-m-show--pf-v5-c-toolbar--spacer
.pf-v5-c-toolbar .pf-m-space-items-none > *--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar .pf-m-space-items-none > :last-child--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar .pf-m-space-items-sm > *--pf-v5-c-toolbar--spacer
0.5rem
.pf-v5-c-toolbar .pf-m-space-items-sm > :last-child--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar .pf-m-space-items-md > *--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar .pf-m-space-items-md > :last-child--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar .pf-m-space-items-lg > *--pf-v5-c-toolbar--spacer
1.5rem
.pf-v5-c-toolbar .pf-m-space-items-lg > :last-child--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar .pf-m-spacer-none--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar .pf-m-spacer-none:last-child--pf-v5-c-toolbar--spacer
0
.pf-v5-c-toolbar .pf-m-spacer-sm--pf-v5-c-toolbar--spacer
0.5rem
.pf-v5-c-toolbar .pf-m-spacer-sm:last-child--pf-v5-c-toolbar--spacer
0.5rem
.pf-v5-c-toolbar .pf-m-spacer-md--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar .pf-m-spacer-md:last-child--pf-v5-c-toolbar--spacer
1rem
.pf-v5-c-toolbar .pf-m-spacer-lg--pf-v5-c-toolbar--spacer
1.5rem
.pf-v5-c-toolbar .pf-m-spacer-lg:last-child--pf-v5-c-toolbar--spacer
1.5rem
.pf-v5-c-toolbar.pf-m-inset-none--pf-v5-c-toolbar--inset
0
.pf-v5-c-toolbar.pf-m-inset-none--pf-v5-c-toolbar__content--PaddingRight
0
.pf-v5-c-toolbar.pf-m-inset-none--pf-v5-c-toolbar__content--PaddingLeft
0
.pf-v5-c-toolbar.pf-m-inset-sm--pf-v5-c-toolbar--inset
0.5rem
.pf-v5-c-toolbar.pf-m-inset-sm--pf-v5-c-toolbar__content--PaddingRight
0.5rem
.pf-v5-c-toolbar.pf-m-inset-sm--pf-v5-c-toolbar__content--PaddingLeft
0.5rem
.pf-v5-c-toolbar.pf-m-inset-md--pf-v5-c-toolbar--inset
1rem
.pf-v5-c-toolbar.pf-m-inset-md--pf-v5-c-toolbar__content--PaddingRight
1rem
.pf-v5-c-toolbar.pf-m-inset-md--pf-v5-c-toolbar__content--PaddingLeft
1rem
.pf-v5-c-toolbar.pf-m-inset-lg--pf-v5-c-toolbar--inset
1.5rem
.pf-v5-c-toolbar.pf-m-inset-lg--pf-v5-c-toolbar__content--PaddingRight
1.5rem
.pf-v5-c-toolbar.pf-m-inset-lg--pf-v5-c-toolbar__content--PaddingLeft
1.5rem
.pf-v5-c-toolbar.pf-m-inset-xl--pf-v5-c-toolbar--inset
2rem
.pf-v5-c-toolbar.pf-m-inset-xl--pf-v5-c-toolbar__content--PaddingRight
2rem
.pf-v5-c-toolbar.pf-m-inset-xl--pf-v5-c-toolbar__content--PaddingLeft
2rem
.pf-v5-c-toolbar.pf-m-inset-2xl--pf-v5-c-toolbar--inset
3rem
.pf-v5-c-toolbar.pf-m-inset-2xl--pf-v5-c-toolbar__content--PaddingRight
3rem
.pf-v5-c-toolbar.pf-m-inset-2xl--pf-v5-c-toolbar__content--PaddingLeft
3rem
.pf-v5-c-toolbar__content-section > :last-child--pf-v5-c-toolbar--spacer
0

View source on GitHub
Red Hat
Copyright © 2014-2025 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines