Toolbar
The toolbar allows a user to manage and manipulate a data set. Data can be presented in a variety of views (table, list, card, etc.). PatternFly supports multiple toolbar variations that address a variety of use cases. Related design guidelines: Filters, Lists and tables, Toolbar
ExamplesDocumentationCSS VariablesExamples
Documentation
Accessibility
| Attribute | Applied to | Outcome |
|---|---|---|
role or aria | pf-c-toolbar | accessibility notes. |
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-c-toolbar | <div> | Initiates the toolbar component. Required |
.pf-c-toolbar__bulk-select | .pf-c-dropdown | Indicates the bulk select. |
.pf-c-toolbar__filter-toggle | .pf-c-button.pf-m-plain | Indicates the filter toggle button on small screens. Required |
.pf-c-toolbar__filter | <div> | Initiates the filter area. Required |
.pf-c-toolbar__sort | .pf-c-options-menu | Initiates the options menu for sorting options. |
.pf-c-toolbar__action-group | <div> | Initiates the action group. Required. Note - at least one action is required. |
.pf-c-toolbar__action-list | .pf-c-dropdown | Indicates the dropdown for an action list. |
.pf-c-pagination | <div> | Indicates the pagination component. |
.pf-c-toolbar__total-items | <div> | Initiates the currently displayed item count for use when there is no pagination and in mobile. Required |
.pf-c-toolbar__filter-list | .pf-c-chip-group | Indicates the list of currently applied filters. Required |
.pf-m-expanded | .pf-c-toolbar__filter-toggle | Modifies the mobile filter toggle for expanded state. |
.pf-m-expanded | .pf-c-toolbar__filter | Modifies filter for the expanded state on small screens. |
.pf-m-expanded | .pf-c-toolbar__filter-list | Modifies for the expanded state when filters are applied. |
CSS Variables
| .pf-c-toolbar | --pf-c-toolbar--PaddingTop | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar--PaddingRight | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar--PaddingBottom | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar--PaddingLeft | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar--xl--PaddingRight | 1.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar--xl--PaddingLeft | 1.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar--child--MarginLeft | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__bulk-select--MarginRight | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__filter--MarginTop | calc(1rem + 1rem) | ||
| .pf-c-toolbar | --pf-c-toolbar__filter--MarginLeft | 0 | ||
| .pf-c-toolbar | --pf-c-toolbar__filter-toggle--MarginLeft | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__filter-toggle--m-expanded--Color | #151515 | ||
| .pf-c-toolbar | --pf-c-toolbar__sort--MarginLeft | 0.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar__action-group--child--MarginLeft | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__sort--action-group--MarginLeft | 0.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar__filter--action-group--MarginLeft | 2rem | ||
| .pf-c-toolbar | --pf-c-toolbar__action-list--MarginLeft | 0.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar__sort--action-list--MarginLeft | 0.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar__total-items--FontSize | 0.875rem | ||
| .pf-c-toolbar | --pf-c-toolbar__filter-list--MarginTop | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__filter-list--c-button--MarginLeft | 0.5rem | ||
| .pf-c-toolbar__filter-toggle | --pf-c-toolbar--child--MarginLeft | 1rem | ||
| .pf-c-toolbar__filter + .pf-c-toolbar__action-group | --pf-c-toolbar--child--MarginLeft | 2rem | ||
| .pf-c-toolbar__sort | --pf-c-toolbar--child--MarginLeft | 0.5rem | ||
| .pf-c-toolbar__sort + .pf-c-toolbar__action-group | --pf-c-toolbar--child--MarginLeft | 0.5rem | ||
| .pf-c-toolbar__sort + .pf-c-toolbar__action-list | --pf-c-toolbar--child--MarginLeft | 0.5rem | ||
| .pf-c-toolbar__action-list | --pf-c-toolbar--child--MarginLeft | 0.5rem | ||
