Skip to content
PatternFly logo

Toggle group

A toggle group is a group of controls that can be used to quickly switch between actions or states.

Examples

Default with multiple selectable

Default with single selectable

Icons

Text and icons

Compact variant

Props

ToggleGroup

*required
NameTypeDefaultDescription
areAllGroupsDisabledbooleanfalseDisable all toggle group items under this component.
aria-labelstringAccessible label for the toggle group
childrenReact.ReactNodeContent rendered inside the toggle group
classNamestringAdditional classes added to the toggle group
isCompactbooleanfalseModifies the toggle group to include compact styling.

ToggleGroupItem

*required
NameTypeDefaultDescription
aria-labelstring''required when icon is used with no supporting text
buttonIdstring''Optional id for the button within the toggle group item
classNamestringAdditional classes added to the toggle group item
iconReact.ReactNodeIcon rendered inside the toggle group item
isDisabledbooleanfalseFlag indicating if the toggle group item is disabled
isSelectedbooleanfalseFlag indicating if the toggle group item is selected
onChange(selected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => void() => {}A callback for when the toggle group item selection changes.
textReact.ReactNodeText rendered inside the toggle group item

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
#fff
.pf-c-toggle-group--pf-c-toggle-group__button--ZIndex
auto
.pf-c-toggle-group--pf-c-toggle-group__button--hover--BackgroundColor
#f0f0f0
.pf-c-toggle-group--pf-c-toggle-group__button--hover--ZIndex
100
.pf-c-toggle-group--pf-c-toggle-group__button--hover--before--BorderColor
#8a8d90
.pf-c-toggle-group--pf-c-toggle-group__button--focus--BackgroundColor
#f0f0f0
.pf-c-toggle-group--pf-c-toggle-group__button--focus--ZIndex
100
.pf-c-toggle-group--pf-c-toggle-group__button--focus--before--BorderColor
#8a8d90
.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__button--before--BorderWidth
1px
.pf-c-toggle-group--pf-c-toggle-group__button--before--BorderColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__item--item--MarginLeft
calc(-1 * 1px)
.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-selected--BackgroundColor
#e7f1fa
.pf-c-toggle-group--pf-c-toggle-group__button--m-selected--before--BorderColor
#06c
.pf-c-toggle-group--pf-c-toggle-group__button--m-selected--ZIndex
100
.pf-c-toggle-group--pf-c-toggle-group--m-compact__button--PaddingTop
0
.pf-c-toggle-group--pf-c-toggle-group--m-compact__button--PaddingRight
0.5rem
.pf-c-toggle-group--pf-c-toggle-group--m-compact__button--PaddingBottom
0
.pf-c-toggle-group--pf-c-toggle-group--m-compact__button--PaddingLeft
0.5rem
.pf-c-toggle-group--pf-c-toggle-group--m-compact__button--FontSize
0.75rem
.pf-c-toggle-group.pf-m-compact--pf-c-toggle-group__button--PaddingTop
0
.pf-c-toggle-group.pf-m-compact--pf-c-toggle-group__button--PaddingRight
0.5rem
.pf-c-toggle-group.pf-m-compact--pf-c-toggle-group__button--PaddingBottom
0
.pf-c-toggle-group.pf-m-compact--pf-c-toggle-group__button--PaddingLeft
0.5rem
.pf-c-toggle-group.pf-m-compact--pf-c-toggle-group__button--FontSize
0.75rem
.pf-c-toggle-group__button:hover--pf-c-toggle-group__button--BackgroundColor
#f0f0f0
.pf-c-toggle-group__button:hover--pf-c-toggle-group__button--ZIndex
100
.pf-c-toggle-group__button:hover--pf-c-toggle-group__button--before--BorderColor
#8a8d90
.pf-c-toggle-group__button:focus--pf-c-toggle-group__button--BackgroundColor
#f0f0f0
.pf-c-toggle-group__button:focus--pf-c-toggle-group__button--ZIndex
100
.pf-c-toggle-group__button:focus--pf-c-toggle-group__button--before--BorderColor
#8a8d90
.pf-c-toggle-group__button.pf-m-selected--pf-c-toggle-group__button--BackgroundColor
#e7f1fa
.pf-c-toggle-group__button.pf-m-selected--pf-c-toggle-group__button--ZIndex
100
.pf-c-toggle-group__button.pf-m-selected--pf-c-toggle-group__button--before--BorderColor
#06c
.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