Skip to content

Toggle group

A toggle group is a set 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-v6-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-v6-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-v6-c-toggle-group
<div>
Initiates the toggle group. Required
.pf-v6-c-toggle-group__button
<button>
Initiates the toggle group button. Required
.pf-v6-c-toggle-group__item
<div>
Initiates the toggle group item wrapper. Required
.pf-v6-c-toggle-group__text
<span>
Initiates the toggle button text element.
.pf-v6-c-toggle-group__icon
<span>
Initiates the toggle button icon element.
.pf-m-compact
.pf-v6-c-toggle-group
Modifies the toggle group for compact styles.
.pf-m-selected
.pf-v6-c-toggle-group__button
Modifies the toggle button group button for the selected state.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--PaddingBlockStart
0.5rem
  • --pf-v6-c-toggle-group__button--PaddingBlockStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--PaddingInlineEnd
1rem
  • --pf-v6-c-toggle-group__button--PaddingInlineEnd
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--PaddingBlockEnd
0.5rem
  • --pf-v6-c-toggle-group__button--PaddingBlockEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--PaddingInlineStart
1rem
  • --pf-v6-c-toggle-group__button--PaddingInlineStart
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--FontSize
0.875rem
  • --pf-v6-c-toggle-group__button--FontSize
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--LineHeight
1.5
  • --pf-v6-c-toggle-group__button--LineHeight
  • --pf-t--global--font--line-height--body
  • --pf-t--global--font--line-height--200
  • 1.5
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--Color
(In light theme) #151515
  • --pf-v6-c-toggle-group__button--Color
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--100
  • --pf-t--color--gray--95
  • #151515
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
  • --pf-v6-c-toggle-group__button--BackgroundColor
  • --pf-t--global--background--color--action--plain--default
  • rgba(255, 255, 255, 0.0000)
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--ZIndex
auto
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--hover--BackgroundColor
(In light theme) #f2f2f2
  • --pf-v6-c-toggle-group__button--hover--BackgroundColor
  • --pf-t--global--background--color--primary--hover
  • --pf-t--global--background--color--200
  • --pf-t--color--gray--10
  • #f2f2f2
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--hover--ZIndex
100
  • --pf-v6-c-toggle-group__button--hover--ZIndex
  • --pf-t--global--z-index--xs
  • --pf-t--global--z-index--100
  • 100
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--hover--before--BorderColor
(In light theme) #c7c7c7
  • --pf-v6-c-toggle-group__button--hover--before--BorderColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--before--BorderWidth
1px
  • --pf-v6-c-toggle-group__button--before--BorderWidth
  • --pf-t--global--border--width--control--default
  • --pf-t--global--border--width--100
  • 1px
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--before--BorderColor
(In light theme) #c7c7c7
  • --pf-v6-c-toggle-group__button--before--BorderColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__item--item--MarginInlineStart
calc(-1 * 1px)
  • --pf-v6-c-toggle-group__item--item--MarginInlineStart
  • calc(-1 * --pf-t--global--border--width--control--default)
  • calc(-1 * --pf-t--global--border--width--100)
  • calc(-1 * 1px)
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius
4px
  • --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius
  • --pf-t--global--border--radius--tiny
  • --pf-t--global--border--radius--100
  • 4px
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius
4px
  • --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius
  • --pf-t--global--border--radius--tiny
  • --pf-t--global--border--radius--100
  • 4px
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius
4px
  • --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius
  • --pf-t--global--border--radius--tiny
  • --pf-t--global--border--radius--100
  • 4px
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius
4px
  • --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius
  • --pf-t--global--border--radius--tiny
  • --pf-t--global--border--radius--100
  • 4px
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__icon--text--MarginInlineStart
0.5rem
  • --pf-v6-c-toggle-group__icon--text--MarginInlineStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--m-selected--BackgroundColor
(In light theme) #0066cc
  • --pf-v6-c-toggle-group__button--m-selected--BackgroundColor
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--m-selected--Color
(In light theme) #ffffff
  • --pf-v6-c-toggle-group__button--m-selected--Color
  • --pf-t--global--text--color--on-brand--default
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--300
  • --pf-t--color--white
  • #ffffff
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--m-selected--before--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-toggle-group__button--m-selected--before--BorderColor
  • --pf-t--global--border--color--clicked
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor
(In light theme) #c7c7c7
  • --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--m-selected--ZIndex
100
  • --pf-v6-c-toggle-group__button--m-selected--ZIndex
  • --pf-t--global--z-index--xs
  • --pf-t--global--z-index--100
  • 100
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--disabled--BackgroundColor
(In light theme) #c7c7c7
  • --pf-v6-c-toggle-group__button--disabled--BackgroundColor
  • --pf-t--global--background--color--disabled--default
  • --pf-t--global--color--disabled--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--disabled--Color
(In light theme) #4d4d4d
  • --pf-v6-c-toggle-group__button--disabled--Color
  • --pf-t--global--text--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--disabled--before--BorderColor
(In light theme) #a3a3a3
  • --pf-v6-c-toggle-group__button--disabled--before--BorderColor
  • --pf-t--global--border--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #a3a3a3
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor
(In light theme) #c7c7c7
  • --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-toggle-group--pf-v6-c-toggle-group__button--disabled--ZIndex
100
  • --pf-v6-c-toggle-group__button--disabled--ZIndex
  • --pf-t--global--z-index--xs
  • --pf-t--global--z-index--100
  • 100
.pf-v6-c-toggle-group--pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart
0
.pf-v6-c-toggle-group--pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd
0.5rem
  • --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-toggle-group--pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd
0
.pf-v6-c-toggle-group--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart
0.5rem
  • --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-toggle-group--pf-v6-c-toggle-group--m-compact__button--FontSize
0.875rem
  • --pf-v6-c-toggle-group--m-compact__button--FontSize
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-toggle-group.pf-m-compact--pf-v6-c-toggle-group__button--PaddingBlockStart
0
  • --pf-v6-c-toggle-group__button--PaddingBlockStart
  • --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart
  • 0
.pf-v6-c-toggle-group.pf-m-compact--pf-v6-c-toggle-group__button--PaddingInlineEnd
0.5rem
  • --pf-v6-c-toggle-group__button--PaddingInlineEnd
  • --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-toggle-group.pf-m-compact--pf-v6-c-toggle-group__button--PaddingBlockEnd
0
  • --pf-v6-c-toggle-group__button--PaddingBlockEnd
  • --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd
  • 0
.pf-v6-c-toggle-group.pf-m-compact--pf-v6-c-toggle-group__button--PaddingInlineStart
0.5rem
  • --pf-v6-c-toggle-group__button--PaddingInlineStart
  • --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 0.5rem
.pf-v6-c-toggle-group.pf-m-compact--pf-v6-c-toggle-group__button--FontSize
0.875rem
  • --pf-v6-c-toggle-group__button--FontSize
  • --pf-v6-c-toggle-group--m-compact__button--FontSize
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-toggle-group__button:is(:hover, :focus)--pf-v6-c-toggle-group__button--BackgroundColor
(In light theme) #f2f2f2
  • --pf-v6-c-toggle-group__button--BackgroundColor
  • --pf-v6-c-toggle-group__button--hover--BackgroundColor
  • --pf-t--global--background--color--primary--hover
  • --pf-t--global--background--color--200
  • --pf-t--color--gray--10
  • #f2f2f2
.pf-v6-c-toggle-group__button:is(:hover, :focus)--pf-v6-c-toggle-group__button--ZIndex
100
  • --pf-v6-c-toggle-group__button--ZIndex
  • --pf-v6-c-toggle-group__button--hover--ZIndex
  • --pf-t--global--z-index--xs
  • --pf-t--global--z-index--100
  • 100
.pf-v6-c-toggle-group__button:is(:hover, :focus)--pf-v6-c-toggle-group__button--before--BorderColor
(In light theme) #c7c7c7
  • --pf-v6-c-toggle-group__button--before--BorderColor
  • --pf-v6-c-toggle-group__button--hover--before--BorderColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-toggle-group__button.pf-m-selected--pf-v6-c-toggle-group__button--BackgroundColor
(In light theme) #0066cc
  • --pf-v6-c-toggle-group__button--BackgroundColor
  • --pf-v6-c-toggle-group__button--m-selected--BackgroundColor
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-toggle-group__button.pf-m-selected--pf-v6-c-toggle-group__button--Color
(In light theme) #ffffff, inherit
  • --pf-v6-c-toggle-group__button--Color
  • var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit)
  • --pf-t--global--text--color--on-brand--default, inherit
  • --pf-t--global--text--color--inverse, inherit
  • --pf-t--global--text--color--300, inherit
  • --pf-t--color--white, inherit
  • #ffffff, inherit
.pf-v6-c-toggle-group__button.pf-m-selected--pf-v6-c-toggle-group__button--ZIndex
100
  • --pf-v6-c-toggle-group__button--ZIndex
  • --pf-v6-c-toggle-group__button--m-selected--ZIndex
  • --pf-t--global--z-index--xs
  • --pf-t--global--z-index--100
  • 100
.pf-v6-c-toggle-group__button.pf-m-selected--pf-v6-c-toggle-group__button--before--BorderColor
(In light theme) #0066cc
  • --pf-v6-c-toggle-group__button--before--BorderColor
  • --pf-v6-c-toggle-group__button--m-selected--before--BorderColor
  • --pf-t--global--border--color--clicked
  • --pf-t--global--color--brand--200
  • --pf-t--color--blue--50
  • #0066cc
.pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled)--pf-v6-c-toggle-group__button--BackgroundColor
(In light theme) #c7c7c7
  • --pf-v6-c-toggle-group__button--BackgroundColor
  • --pf-v6-c-toggle-group__button--disabled--BackgroundColor
  • --pf-t--global--background--color--disabled--default
  • --pf-t--global--color--disabled--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled)--pf-v6-c-toggle-group__button--Color
(In light theme) #4d4d4d
  • --pf-v6-c-toggle-group__button--Color
  • --pf-v6-c-toggle-group__button--disabled--Color
  • --pf-t--global--text--color--on-disabled
  • --pf-t--global--color--disabled--300
  • --pf-t--color--gray--60
  • #4d4d4d
.pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled)--pf-v6-c-toggle-group__button--ZIndex
100
  • --pf-v6-c-toggle-group__button--ZIndex
  • --pf-v6-c-toggle-group__button--disabled--ZIndex
  • --pf-t--global--z-index--xs
  • --pf-t--global--z-index--100
  • 100
.pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled)--pf-v6-c-toggle-group__button--before--BorderColor
(In light theme) #a3a3a3
  • --pf-v6-c-toggle-group__button--before--BorderColor
  • --pf-v6-c-toggle-group__button--disabled--before--BorderColor
  • --pf-t--global--border--color--disabled
  • --pf-t--global--color--disabled--200
  • --pf-t--color--gray--40
  • #a3a3a3
.pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected)--pf-v6-c-toggle-group__button--before--BorderInlineStartColor
(In light theme) #c7c7c7
  • --pf-v6-c-toggle-group__button--before--BorderInlineStartColor
  • --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled)--pf-v6-c-toggle-group__button--before--BorderInlineStartColor
(In light theme) #c7c7c7
  • --pf-v6-c-toggle-group__button--before--BorderInlineStartColor
  • --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7

Edit this page on GitHub
Red Hat
Copyright © 2014-2025 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines