HTML

Data toolbar

Info alert:Experimental feature

This is an experimental feature in the early stages of testing. It's not intended for production use.
ExamplesDocumentationCSS Variables

Examples

Data toolbar items

Copied to clipboard

Adjusting item spacers

Copied to clipboard

Adjusting group spacers

Copied to clipboard

Data toolbar group types

Copied to clipboard

Data toolbar toggle group (responsive)

Copied to clipboard

Data toolbar selected filters

Copied to clipboard

Data toolbar stacked

Copied to clipboard

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 section. 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-separator .pf-c-data-toolbar__item Initiates separator border.
.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-clear .pf-c-data-toolbar__expandable-content .pf-c-data-toolbar__item Positions clear all filters button.

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

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 and revealed. By default, all filters are hidden until the specified breakpoint is reached.
.pf-m-reveal{-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.
.pf-m-shared-item .pf-c-data-toolbar__item, .pf-c-data-toolbar__group Identifies a toolbar item or group that appear within 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--BackgroundColorc_data_toolbar_BackgroundColorvar(--pf-global--BackgroundColor--light-100)
--pf-c-data-toolbar--GridGapc_data_toolbar_GridGapvar(--pf-global--gutter)
--pf-c-data-toolbar__expandable-content--BoxShadowc_data_toolbar__expandable_content_BoxShadowvar(--pf-global--BoxShadow--md-bottom)
--pf-c-data-toolbar__expandable-content--PaddingBottomc_data_toolbar__expandable_content_PaddingBottomvar(--pf-global--spacer--md)
--pf-c-data-toolbar__expandable-content--PaddingLeftc_data_toolbar__expandable_content_PaddingLeftvar(--pf-global--spacer--md)
--pf-c-data-toolbar__expandable-content--PaddingRightc_data_toolbar__expandable_content_PaddingRightvar(--pf-global--spacer--md)
--pf-c-data-toolbar__expandable-content--PaddingTopc_data_toolbar__expandable_content_PaddingTopvar(--pf-global--spacer--md)
--pf-c-data-toolbar__expandable-content--ZIndexc_data_toolbar__expandable_content_ZIndexvar(--pf-global--ZIndex--xs)
--pf-c-data-toolbar__expandable-content--lg--PaddingBottomc_data_toolbar__expandable_content_lg_PaddingBottom0
--pf-c-data-toolbar__expandable-content--lg--PaddingLeftc_data_toolbar__expandable_content_lg_PaddingLeft0
--pf-c-data-toolbar__expandable-content--lg--PaddingRightc_data_toolbar__expandable_content_lg_PaddingRight0
--pf-c-data-toolbar__expandable-content--lg--PaddingTopc_data_toolbar__expandable_content_lg_PaddingTop0
--pf-c-data-toolbar__expandable-content--m-expanded--GridRowGapc_data_toolbar__expandable_content_m_expanded_GridRowGapvar(--pf-global--gutter)
--pf-c-data-toolbar__group--m-button-group--space-itemsc_data_toolbar__group_m_button_group_space_itemsvar(--pf-global--spacer--sm)
--pf-c-data-toolbar__group--m-button-group--spacerc_data_toolbar__group_m_button_group_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-filter-group--space-itemsc_data_toolbar__group_m_filter_group_space_items0
--pf-c-data-toolbar__group--m-filter-group--spacerc_data_toolbar__group_m_filter_group_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-icon-button-group--space-itemsc_data_toolbar__group_m_icon_button_group_space_items0
--pf-c-data-toolbar__group--m-icon-button-group--spacerc_data_toolbar__group_m_icon_button_group_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-toggle-group--m-reveal--spacerc_data_toolbar__group_m_toggle_group_m_reveal_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-toggle-group--spacerc_data_toolbar__group_m_toggle_group_spacervar(--pf-global--spacer--sm)
--pf-c-data-toolbar__group--spacerc_data_toolbar__group_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-bulk-select--spacerc_data_toolbar__item_m_bulk_select_spacervar(--pf-global--spacer--lg)
--pf-c-data-toolbar__item--m-chip-group--spacerc_data_toolbar__item_m_chip_group_spacervar(--pf-global--spacer--sm)
--pf-c-data-toolbar__item--m-label--FontWeightc_data_toolbar__item_m_label_FontWeightvar(--pf-global--FontWeight--bold)
--pf-c-data-toolbar__item--m-label--spacerc_data_toolbar__item_m_label_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-overflow-menu--spacerc_data_toolbar__item_m_overflow_menu_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-search-filter--spacerc_data_toolbar__item_m_search_filter_spacervar(--pf-global--spacer--sm)
--pf-c-data-toolbar__item--m-separator--BackgroundColorc_data_toolbar__item_m_separator_BackgroundColorvar(--pf-global--BorderColor--dark-100)
--pf-c-data-toolbar__item--m-separator--Heightc_data_toolbar__item_m_separator_Heightvar(--pf-global--FontSize--lg)
--pf-c-data-toolbar__item--m-separator--Widthc_data_toolbar__item_m_separator_Widthvar(--pf-global--BorderWidth--md)
--pf-c-data-toolbar__item--m-separator--spacerc_data_toolbar__item_m_separator_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__item--spacerc_data_toolbar__item_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__toggle--c-badge--MarginLeftc_data_toolbar__toggle_c_badge_MarginLeftvar(--pf-global--spacer--sm)
--pf-c-data-toolbar--spacerc_data_toolbar_spacervar(--pf-global--spacer--lg)
--pf-c-data-toolbar--spacer--basec_data_toolbar_spacer_basevar(--pf-global--spacer--md)