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.

Examples

Default



With icon



Icon-and-text


Light


Documentation

Accessibility

Attribute
Applied to
Outcome
aria-label="[button label text]"
.pf-c-toggle-group__button
Provides 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__button
When a button element is used, indicates that it is unavailable and removes it from keyboard focus. Required when button is disabled

Usage

Class
Applied to
Outcome
.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__button
Modifies the toggle button group button for the selected state.
.pf-m-light
.pf-c-toggle-group__button
Modifies 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--PaddingTop
0.375rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingRight
1rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingBottom
0.375rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingLeft
1rem
.pf-c-toggle-group--pf-c-toggle-group__button--FontSize
0.875rem
.pf-c-toggle-group--pf-c-toggle-group__button--LineHeight
calc(1rem * 1.5)
.pf-c-toggle-group--pf-c-toggle-group__button--Color
#151515
.pf-c-toggle-group--pf-c-toggle-group__button--BackgroundColor
#f0f0f0
.pf-c-toggle-group--pf-c-toggle-group__button--hover--BackgroundColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__button--focus--BackgroundColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__button--disabled--BackgroundColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__button--disabled--Color
#6a6e73
.pf-c-toggle-group--pf-c-toggle-group__item--first-child__button--BorderTopLeftRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__item--first-child__button--BorderBottomLeftRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__item--last-child__button--BorderTopRightRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__item--last-child__button--BorderBottomRightRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__icon--text--MarginLeft
0.5rem
.pf-c-toggle-group--pf-c-toggle-group__button--m-light--BackgroundColor
#fff
.pf-c-toggle-group--pf-c-toggle-group__button--m-selected--BackgroundColor
#06c
.pf-c-toggle-group--pf-c-toggle-group__button--m-selected--Color
#fff
.pf-c-toggle-group__button.pf-m-light--pf-c-toggle-group__button--BackgroundColor
#fff
.pf-c-toggle-group__button:hover--pf-c-toggle-group__button--BackgroundColor
#d2d2d2
.pf-c-toggle-group__button:focus--pf-c-toggle-group__button--BackgroundColor
#d2d2d2
.pf-c-toggle-group__button.pf-m-selected--pf-c-toggle-group__button--BackgroundColor
#06c
.pf-c-toggle-group__button.pf-m-selected--pf-c-toggle-group__button--Color
#fff
.pf-c-toggle-group__button:disabled--pf-c-toggle-group__button--BackgroundColor
#d2d2d2
.pf-c-toggle-group__button:disabled--pf-c-toggle-group__button--Color
#6a6e73

View source on GitHub