PatternFly

Toggle group

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

Examples

Default



With icon



Icon-and-text


Compact



Documentation

Accessibility

Attribute
Applied to
Outcome
aria-label="[button label text]"
.pf-v5-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-v5-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-v5-c-toggle-group
<div>
Initiates the toggle group. Required
.pf-v5-c-toggle-group__button
<button>
Initiates the toggle group button. Required
.pf-v5-c-toggle-group__item
<div>
Initiates the toggle group item wrapper. Required
.pf-v5-c-toggle-group__text
<span>
Initiates the toggle button text element.
.pf-v5-c-toggle-group__icon
<span>
Initiates the toggle button icon element.
.pf-m-compact
.pf-v5-c-toggle-group
Modifies the toggle group for compact styles.
.pf-m-selected
.pf-v5-c-toggle-group__button
Modifies the toggle button group button for the selected state.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--PaddingTop
0.375rem
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--PaddingRight
1rem
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--PaddingBottom
0.375rem
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--PaddingLeft
1rem
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--FontSize
0.875rem
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--LineHeight
calc(1rem * 1.5)
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--Color
#151515
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--BackgroundColor
#fff
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--ZIndex
auto
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--hover--BackgroundColor
#f0f0f0
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--hover--ZIndex
100
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--hover--before--BorderColor
#8a8d90
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--focus--BackgroundColor
#f0f0f0
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--focus--ZIndex
100
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--focus--before--BorderColor
#8a8d90
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--disabled--BackgroundColor
#d2d2d2
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--disabled--Color
#6a6e73
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--before--BorderWidth
1px
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--before--BorderColor
#d2d2d2
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__item--item--MarginLeft
calc(-1 * 1px)
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius
3px
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius
3px
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius
3px
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius
3px
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__icon--text--MarginLeft
0.5rem
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--m-selected--BackgroundColor
#e7f1fa
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--m-selected--Color
initial
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--m-selected--before--BorderColor
#06c
.pf-v5-c-toggle-group--pf-v5-c-toggle-group__button--m-selected--ZIndex
100
.pf-v5-c-toggle-group--pf-v5-c-toggle-group--m-compact__button--PaddingTop
0
.pf-v5-c-toggle-group--pf-v5-c-toggle-group--m-compact__button--PaddingRight
0.5rem
.pf-v5-c-toggle-group--pf-v5-c-toggle-group--m-compact__button--PaddingBottom
0
.pf-v5-c-toggle-group--pf-v5-c-toggle-group--m-compact__button--PaddingLeft
0.5rem
.pf-v5-c-toggle-group--pf-v5-c-toggle-group--m-compact__button--FontSize
0.75rem
.pf-v5-c-toggle-group.pf-m-compact--pf-v5-c-toggle-group__button--PaddingTop
0
.pf-v5-c-toggle-group.pf-m-compact--pf-v5-c-toggle-group__button--PaddingRight
0.5rem
.pf-v5-c-toggle-group.pf-m-compact--pf-v5-c-toggle-group__button--PaddingBottom
0
.pf-v5-c-toggle-group.pf-m-compact--pf-v5-c-toggle-group__button--PaddingLeft
0.5rem
.pf-v5-c-toggle-group.pf-m-compact--pf-v5-c-toggle-group__button--FontSize
0.75rem
.pf-v5-c-toggle-group__button:hover--pf-v5-c-toggle-group__button--BackgroundColor
#f0f0f0
.pf-v5-c-toggle-group__button:hover--pf-v5-c-toggle-group__button--ZIndex
100
.pf-v5-c-toggle-group__button:hover--pf-v5-c-toggle-group__button--before--BorderColor
#8a8d90
.pf-v5-c-toggle-group__button:focus--pf-v5-c-toggle-group__button--BackgroundColor
#f0f0f0
.pf-v5-c-toggle-group__button:focus--pf-v5-c-toggle-group__button--ZIndex
100
.pf-v5-c-toggle-group__button:focus--pf-v5-c-toggle-group__button--before--BorderColor
#8a8d90
.pf-v5-c-toggle-group__button.pf-m-selected--pf-v5-c-toggle-group__button--BackgroundColor
#e7f1fa
.pf-v5-c-toggle-group__button.pf-m-selected--pf-v5-c-toggle-group__button--Color
initial, inherit
.pf-v5-c-toggle-group__button.pf-m-selected--pf-v5-c-toggle-group__button--ZIndex
100
.pf-v5-c-toggle-group__button.pf-m-selected--pf-v5-c-toggle-group__button--before--BorderColor
#06c
.pf-v5-c-toggle-group__button:disabled--pf-v5-c-toggle-group__button--BackgroundColor
#d2d2d2
.pf-v5-c-toggle-group__button:disabled--pf-v5-c-toggle-group__button--Color
#6a6e73

View source on GitHub