HTML

Toolbar

ExamplesDocumentationCSS Variables

Examples

Documentation

Accessibility

AttributeApplied toOutcome
role or ariapf-c-toolbaraccessibility notes.

Usage

ClassApplied toOutcome
.pf-c-toolbar<div>Initiates the toolbar component. Required
.pf-c-toolbar__bulk-select.pf-c-dropdownIndicates the bulk select.
.pf-c-toolbar__filter-toggle.pf-c-button.pf-m-plainIndicates 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-menuInitiates 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-dropdownIndicates 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-groupIndicates the list of currently applied filters. Required
.pf-m-expanded.pf-c-toolbar__filter-toggleModifies the mobile filter toggle for expanded state.
.pf-m-expanded.pf-c-toolbar__filterModifies filter for the expanded state on small screens.
.pf-m-expanded.pf-c-toolbar__filter-listModifies for the expanded state when filters are applied.

CSS Variables

--pf-c-toolbar__action-group--child--MarginLeftc_toolbar__action_group_child_MarginLeft
1rem
--pf-c-toolbar__action-list--MarginLeftc_toolbar__action_list_MarginLeft
0.5rem
--pf-c-toolbar__bulk-select--MarginRightc_toolbar__bulk_select_MarginRight
1rem
--pf-c-toolbar__filter--action-group--MarginLeftc_toolbar__filter_action_group_MarginLeft
2rem
--pf-c-toolbar__filter-list--c-button--MarginLeftc_toolbar__filter_list_c_button_MarginLeft
0.5rem
--pf-c-toolbar__filter-list--MarginTopc_toolbar__filter_list_MarginTop
1rem
--pf-c-toolbar__filter--MarginLeftc_toolbar__filter_MarginLeft
0
--pf-c-toolbar__filter--MarginTopc_toolbar__filter_MarginTop
calc(1rem + 1rem)
--pf-c-toolbar__filter-toggle--m-expanded--Colorc_toolbar__filter_toggle_m_expanded_Color
#151515
--pf-c-toolbar__filter-toggle--MarginLeftc_toolbar__filter_toggle_MarginLeft
1rem
--pf-c-toolbar__sort--action-group--MarginLeftc_toolbar__sort_action_group_MarginLeft
0.5rem
--pf-c-toolbar__sort--action-list--MarginLeftc_toolbar__sort_action_list_MarginLeft
0.5rem
--pf-c-toolbar__sort--MarginLeftc_toolbar__sort_MarginLeft
0.5rem
--pf-c-toolbar__total-items--FontSizec_toolbar__total_items_FontSize
0.875rem
--pf-c-toolbar--child--MarginLeftc_toolbar_child_MarginLeft
0.5rem
--pf-c-toolbar--md--PaddingLeftc_toolbar_md_PaddingLeft
1rem
--pf-c-toolbar--md--PaddingRightc_toolbar_md_PaddingRight
1rem
--pf-c-toolbar--PaddingBottomc_toolbar_PaddingBottom
1rem
--pf-c-toolbar--PaddingLeftc_toolbar_PaddingLeft
1.5rem
--pf-c-toolbar--PaddingRightc_toolbar_PaddingRight
1.5rem
--pf-c-toolbar--PaddingTopc_toolbar_PaddingTop
1rem