Patternfly Logo

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

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--PaddingTop
0.5rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingRight
1rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingBottom
0.5rem
.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--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