Skip to Content
Patternfly Logo

Toggle group

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesDocumentationCSS Variables

Examples

Default



With icon



Icon and text


Light


Documentation

Accessibility

AttributeApplied toOutcome
aria-label="[button label text]".pf-c-toggle-group__buttonProvides an accessible name for the button when an icon is used instead of text. Required when icon is used with no supporting text
disabled.pf-c-toggle-group__buttonWhen a button element is used, indicates that it is unavailable and removes it from keyboard focus. Required when button is disabled

Usage

ClassApplied toOutcome
.pf-c-toggle-group<div>Initiates the toggle group. Required
.pf-c-toggle-group__button<button>Initiates the toggle group button. Required
.pf-c-toggle-group__item<div>Initiates the toggle group item wrapper. Required
.pf-c-toggle-group__text<span>Initiates the toggle button text element.
.pf-c-toggle-group__icon<span>Initiates the toggle button icon element.
.pf-m-selected.pf-c-toggle-group__buttonModifies the toggle button group button for the selected state.
.pf-m-light.pf-c-toggle-group__buttonModifies the toggle button group button to have a light background to be used on a darker background.

CSS Variables

.pf-c-toggle-group--pf-c-toggle-group__button--PaddingTopc_toggle_group__button_PaddingTop
0.5rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingRightc_toggle_group__button_PaddingRight
1rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingBottomc_toggle_group__button_PaddingBottom
0.5rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingLeftc_toggle_group__button_PaddingLeft
1rem
.pf-c-toggle-group--pf-c-toggle-group__button--FontSizec_toggle_group__button_FontSize
0.875rem
.pf-c-toggle-group--pf-c-toggle-group__button--Colorc_toggle_group__button_Color
#151515
.pf-c-toggle-group--pf-c-toggle-group__button--BackgroundColorc_toggle_group__button_BackgroundColor
#f0f0f0
.pf-c-toggle-group--pf-c-toggle-group__button--hover--BackgroundColorc_toggle_group__button_hover_BackgroundColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__button--focus--BackgroundColorc_toggle_group__button_focus_BackgroundColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__button--disabled--BackgroundColorc_toggle_group__button_disabled_BackgroundColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__button--disabled--Colorc_toggle_group__button_disabled_Color
#6a6e73
.pf-c-toggle-group--pf-c-toggle-group__item--first-child__button--BorderTopLeftRadiusc_toggle_group__item_first_child__button_BorderTopLeftRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__item--first-child__button--BorderBottomLeftRadiusc_toggle_group__item_first_child__button_BorderBottomLeftRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__item--last-child__button--BorderTopRightRadiusc_toggle_group__item_last_child__button_BorderTopRightRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__item--last-child__button--BorderBottomRightRadiusc_toggle_group__item_last_child__button_BorderBottomRightRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__icon--text--MarginLeftc_toggle_group__icon_text_MarginLeft
0.5rem
.pf-c-toggle-group--pf-c-toggle-group__button--m-light--BackgroundColorc_toggle_group__button_m_light_BackgroundColor
#fff
.pf-c-toggle-group--pf-c-toggle-group__button--m-selected--BackgroundColorc_toggle_group__button_m_selected_BackgroundColor
#06c
.pf-c-toggle-group--pf-c-toggle-group__button--m-selected--Colorc_toggle_group__button_m_selected_Color
#fff
.pf-c-toggle-group__button.pf-m-light--pf-c-toggle-group__button--BackgroundColorc_toggle_group__button_BackgroundColor
#fff
.pf-c-toggle-group__button:hover--pf-c-toggle-group__button--BackgroundColorc_toggle_group__button_BackgroundColor
#d2d2d2
.pf-c-toggle-group__button:focus--pf-c-toggle-group__button--BackgroundColorc_toggle_group__button_BackgroundColor
#d2d2d2
.pf-c-toggle-group__button.pf-m-selected--pf-c-toggle-group__button--BackgroundColorc_toggle_group__button_BackgroundColor
#06c
.pf-c-toggle-group__button.pf-m-selected--pf-c-toggle-group__button--Colorc_toggle_group__button_Color
#fff
.pf-c-toggle-group__button:disabled--pf-c-toggle-group__button--BackgroundColorc_toggle_group__button_BackgroundColor
#d2d2d2
.pf-c-toggle-group__button:disabled--pf-c-toggle-group__button--Colorc_toggle_group__button_Color
#6a6e73