Data toolbar
Info alert:Beta feature
This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
The Data Toolbar component provides a flexible system for creating responsive toolbars that manage the data displayed in a list, table, or any other data view. Toolbar configurations can be customized to support a variety of use cases. Related design guidelines: Filters
IntroductionExamplesDocumentationCSS VariablesIntroduction
Data toolbar relies on groups (.pf-c-data-toolbar__group) and items (.pf-c-data-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-c-data-toolbar--spacer--base, whose value is --pf-global--spacer--md or 16px.
Default spacing for items and groups:
| Class | CSS Variable | Computed Value |
|---|---|---|
.pf-c-data-toolbar__item | --pf-c-data-toolbar__item--spacer | 16px |
.pf-c-data-toolbar__group | --pf-c-data-toolbar__group--spacer | 16px |
Data toolbar item types
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-bulk-select | .pf-c-data-toolbar__item | Initiates bulk select spacing. Spacer value is set to var(--pf-c-data-toolbar--m-bulk-select--spacer). |
.pf-m-overflow-menu | .pf-c-data-toolbar__item | Initiates overflow menu spacing. Spacer value is set to var(--pf-c-data-toolbar--m-overflow-menu--spacer). |
.pf-m-pagination | .pf-c-data-toolbar__item | Initiates pagination spacing and margin. Spacer value is set to var(--pf-c-data-toolbar--m-pagination--spacer). |
.pf-m-search-filter | .pf-c-data-toolbar__item | Initiates search filter spacing. Spacer value is set to var(--pf-c-data-toolbar--m-search-filter--spacer). |
Modifiers
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-hidden{-on-[breakpoint]} | .pf-c-data-toolbar > * | Modifies toolbar element to be hidden, at optional breakpoint. |
.pf-m-visible{-on-[breakpoint]} | .pf-c-data-toolbar > * | Modifies toolbar element to be shown, at optional breakpoint. |
.pf-m-align-right{-on-[breakpoint]} | .pf-c-data-toolbar > * | Modifies toolbar element to align right, at optional breakpoint. |
.pf-m-align-left{-on-[breakpoint]} | .pf-c-data-toolbar > * | Modifies toolbar element to align left, at optional breakpoint. |
Special notes
Several components in the following examples do not include functional and/or accessibility specifications (for example .pf-c-select, .pf-c-options-menu). Rather, .pf-c-data-toolbar focuses on functionality and accessibility specifications that apply to it only.
Available breakpoints are: -on-md, -on-lg, -on-xl, -on-2xl.
Examples
Item types
| Class | Applied to | Outcome |
|---|---|---|
.pf-c-data-toolbar__item | <div> | Initiates the toolbar component item. Required |
.pf-c-data-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-c-data-toolbar.
Data toolbar spacers
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]} | .pf-c-data-toolbar__group, .pf-c-data-toolbar__item | Modifies toolbar group or item spacing. |
.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]} | .pf-c-data-toolbar__group | Modifies toolbar group child spacing. |
Data toolbar group types
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-filter-group | .pf-c-data-toolbar__group | Modifies toolbar group spacing. Spacer value is set to var(--pf-c-data-toolbar__group--m-filter-group--spacer). Child spacer value is set to var(--pf-c-data-toolbar__group--m-filter-group--space-items). |
.pf-m-icon-button-group | .pf-c-data-toolbar__group | Modifies toolbar group spacing. Spacer value is set to var(--pf-c-data-toolbar__group--m-toggle-group--spacer). Child spacer value is set to var(--pf-c-data-toolbar__group--m-icon-button-group--space-items). |
.pf-m-button-group | .pf-c-data-toolbar__group | Modifies toolbar group spacing. Spacer value is set to var(--pf-c-data-toolbar__group--m-toggle-group--spacer). Child spacer value is set to var(--pf-c-data-toolbar__group--m-button-group--space-items). |
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-c-data-toolbar__item, .pf-c-data-toolbar__group, .pf-c-data-toolbar__toggle, .pf-c-data-toolbar__expandable-content | Indicates that the toggle group element is hidden. Required |
aria-expanded="true" | .pf-c-data-toolbar__toggle > .pf-c-button | Indicates that the expandable content is visible. Required |
aria-expanded="false" | .pf-c-data-toolbar__toggle > .pf-c-button | Indicates the the expandable content is hidden. Required |
aria-controls="[id of expandable content]" | .pf-c-data-toolbar__toggle > .pf-c-button | Identifies the expanded content controlled by the toggle button. Required |
id="[expandable-content_id]" | .pf-c-data-toolbar__expandable-content | Provides a reference for toggle button description. Required |
Responsive attributes
| Attribute | Applied to | Outcome |
|---|---|---|
aria-haspopup="true" | .pf-c-data-toolbar__toggle > .pf-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-c-data-toolbar__group.pf-m-toggle-group, .pf-c-data-toolbar__expandable-content | Modifies toolbar element visibility at breakpoint. This selector must be applied consistently to toggle group and expandable content. |
.pf-m-chip-container | .pf-c-data-toolbar__content-section, .pf-c-data-toolbar__group | Modifies the data toolbar element for applied filters layout. |
.pf-m-expanded | .pf-c-data-toolbar__expandable-content, .pf-c-data-toolbar__toggle | Modifies the component for the expanded state. |
Selected
Stacked
Expanded elements
Documentation
Overview
As the data 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-c-data-toolbar | <div> | Initiates the toolbar component. Required |
.pf-c-data-toolbar__item | <div> | Initiates a toolbar item. Required |
.pf-c-data-toolbar__group | <div> | Initiates a toolbar group. |
.pf-c-data-toolbar__content | <div> | Initiates a toolbar content container. Required |
.pf-c-data-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-c-data-toolbar__content-section per .pf-c-data-toolbar__content Required |
.pf-c-data-toolbar__expandable-content | <div> | Initiates a toolbar expandable content section. |
.pf-m-expanded | .pf-c-data-toolbar__expandable-content | Modifies expandable content section for the expanded state. |
.pf-m-bulk-select | .pf-c-data-toolbar__item | Initiates bulk select spacing. |
.pf-m-overflow-menu | .pf-c-data-toolbar__item | Initiates overflow menu spacing. |
.pf-m-pagination | .pf-c-data-toolbar__item | Initiates pagination spacing and margin. |
.pf-m-search-filter | .pf-c-data-toolbar__item | Initiates search filter spacing. |
.pf-m-chip-group | .pf-c-data-toolbar__item | Initiates chip group spacing. |
.pf-m-button-group | .pf-c-data-toolbar__group | Initiates button group spacing. |
.pf-m-icon-button-group | .pf-c-data-toolbar__group | Initiates icon button group spacing. |
.pf-m-filter-group | .pf-c-data-toolbar__group | Initiates filter group spacing. |
.pf-m-hidden{-on-[breakpoint]} | .pf-c-data-toolbar > * | Modifies toolbar element to be hidden, at optional breakpoint. |
.pf-m-visible{-on-[breakpoint]} | .pf-c-data-toolbar > * | Modifies toolbar element to be shown, at optional breakpoint. |
.pf-m-align-right{-on-[breakpoint]} | .pf-c-data-toolbar > * | Modifies toolbar element to align right, at optional breakpoint. |
.pf-m-align-left{-on-[breakpoint]} | .pf-c-data-toolbar > * | Modifies toolbar element to align left, at optional breakpoint. |
.pf-m-label | .pf-c-data-toolbar__item | Modifies toolbar item to label. |
.pf-m-chip-container | .pf-c-data-toolbar__content, .pf-c-data-toolbar__group | Modifies the data toolbar element for applied filters layout. |
.pf-m-expanded | .pf-c-data-toolbar__expandable-content, .pf-c-data-toolbar__toggle | Modifies the component for the expanded state. |
Accessibility
| Attribute | Applied to | Outcome |
|---|---|---|
hidden | .pf-c-data-toolbar__item, .pf-c-data-toolbar__group, .pf-c-data-toolbar__toggle, .pf-c-data-toolbar__expandable-content | Indicates that the data toolbar element is hidden. Required |
aria-expanded="true" | .pf-c-data-toolbar__toggle > .pf-c-button | Indicates that the expandable content is visible. Required |
aria-expanded="false" | .pf-c-data-toolbar__toggle > .pf-c-button | Indicates the the expandable content is hidden. Required |
aria-controls="[id of expandable content]" | .pf-c-data-toolbar__toggle > .pf-c-button | Identifies the expanded content controlled by the toggle button. Required |
id="[expandable-content_id]" | .pf-c-data-toolbar__expandable-content | Provides a reference for toggle button description. Required |
Toggle group usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-toggle-group | .pf-c-data-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-c-data-toolbar__group.pf-m-toggle-group, .pf-c-data-toolbar__expandable-content | Modifies toolbar element to hidden at 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-c-data-toolbar__group, .pf-c-data-toolbar__item | Modifies toolbar group or item spacing. |
.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]} | .pf-c-data-toolbar__group | Modifies toolbar group child spacing. |
CSS Variables
| .pf-c-data-toolbar | --pf-c-data-toolbar--BackgroundColor | #fff | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar--RowGap | 1.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar--PaddingTop | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar--PaddingBottom | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__content--PaddingRight | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__content--PaddingLeft | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--PaddingTop | 1.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--PaddingRight | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--PaddingBottom | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--PaddingLeft | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--lg--PaddingRight | 0 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--lg--PaddingBottom | 0 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--lg--PaddingLeft | 0 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--ZIndex | 100 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--BoxShadow | 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18) | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--BackgroundColor | #fff | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--m-expanded--GridRowGap | 1.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-chip-container--MarginTop | calc(1rem * -1) | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-chip-container__item--MarginTop | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar--spacer--base | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-toggle-group--spacer | 0.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-toggle-group--m-show--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-icon-button-group--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-icon-button-group--space-items | 0 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-button-group--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-button-group--space-items | 0.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-filter-group--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-filter-group--space-items | 0 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--m-overflow-menu--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--m-bulk-select--spacer | 1.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--m-search-filter--spacer | 0.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--m-chip-group--spacer | 0.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--m-label--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--m-label--FontWeight | 600 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__toggle--m-expanded__c-button--m-plain--Color | #151515 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar--c-divider--m-vertical--spacer | 1rem | ||
| .pf-c-data-toolbar__content-section > .pf-c-divider | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__content-section > .pf-c-divider.pf-m-vertical:last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar__group | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__group.pf-m-button-group | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__group.pf-m-button-group > * | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar__group.pf-m-icon-button-group | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__group.pf-m-icon-button-group > * | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar__group.pf-m-filter-group | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__group.pf-m-filter-group > * | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar__group.pf-m-toggle-group | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar__group:last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar__item | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__item.pf-m-overflow-menu | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__item.pf-m-bulk-select | --pf-c-data-toolbar--spacer | 1.5rem | ||
| .pf-c-data-toolbar__item.pf-m-search-filter | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar__item.pf-m-chip-group | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar__item.pf-m-label | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__item:last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar__expandable-content .pf-c-data-toolbar__group | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar__content.pf-m-chip-container .pf-c-data-toolbar__item | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__content.pf-m-chip-container .pf-c-data-toolbar__group | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__content.pf-m-chip-container .pf-c-data-toolbar__group:last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-c-chip-group:last-child | --pf-c-chip-group--MarginRight | 0 | ||
| .pf-c-data-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-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar .pf-m-space-items-none > * | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-space-items-none > :last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-space-items-sm > * | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar .pf-m-space-items-sm > :last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-space-items-md > * | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar .pf-m-space-items-md > :last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-space-items-lg > * | --pf-c-data-toolbar--spacer | 1.5rem | ||
| .pf-c-data-toolbar .pf-m-space-items-lg > :last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-spacer-none | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-spacer-none:last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-spacer-sm | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar .pf-m-spacer-sm:last-child | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar .pf-m-spacer-md | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar .pf-m-spacer-md:last-child | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar .pf-m-spacer-lg | --pf-c-data-toolbar--spacer | 1.5rem | ||
| .pf-c-data-toolbar .pf-m-spacer-lg:last-child | --pf-c-data-toolbar--spacer | 1.5rem | ||
| .pf-c-data-toolbar__content-section > :last-child | --pf-c-data-toolbar--spacer | 0 | ||
