Toggle group

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

CSS variables

Expand or collapse column	Selector	Variable	Value
	.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) #ffffff
--pf-v6-c-toggle-group__button--BackgroundColor --pf-t--global--background--color--control--default --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.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--Color	(In light theme) #151515
--pf-v6-c-toggle-group__button--hover--Color --pf-t--global--text--color--on-brand--subtle--default --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--hover--BackgroundColor	(In light theme) #e0f0ff
--pf-v6-c-toggle-group__button--hover--BackgroundColor --pf-t--global--color--brand--subtle--default --pf-t--global--color--brand--subtle--100 --pf-t--color--blue--10 #e0f0ff
	.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) #4394e5
--pf-v6-c-toggle-group__button--hover--before--BorderColor --pf-t--global--border--color--brand--subtle--hover --pf-t--global--color--brand--subtle--300 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--hover--after--BorderWidth	0px
--pf-v6-c-toggle-group__button--hover--after--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.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) #8c8c8c
--pf-v6-c-toggle-group__button--before--BorderColor --pf-t--global--border--color--control--default --pf-t--global--border--color--300 --pf-t--color--gray--45 #8c8c8c
	.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	6px
--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius --pf-t--global--border--radius--control--default --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius	6px
--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius --pf-t--global--border--radius--control--default --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius	6px
--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius --pf-t--global--border--radius--control--default --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius	6px
--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius --pf-t--global--border--radius--control--default --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.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__icon--Color	(In light theme) #1f1f1f
--pf-v6-c-toggle-group__icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__icon--hover--Color	(In light theme) #1f1f1f
--pf-v6-c-toggle-group__icon--hover--Color --pf-t--global--icon--color--on-brand--subtle--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__icon--m-selected--Color	(In light theme) #1f1f1f
--pf-v6-c-toggle-group__icon--m-selected--Color --pf-t--global--icon--color--on-brand--subtle--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__icon--disabled--Color	(In light theme) #707070
--pf-v6-c-toggle-group__icon--disabled--Color --pf-t--global--icon--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--50 #707070
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--m-selected--BackgroundColor	(In light theme) #e0f0ff
--pf-v6-c-toggle-group__button--m-selected--BackgroundColor --pf-t--global--color--brand--subtle--default --pf-t--global--color--brand--subtle--100 --pf-t--color--blue--10 #e0f0ff
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--m-selected--Color	(In light theme) #151515
--pf-v6-c-toggle-group__button--m-selected--Color --pf-t--global--text--color--on-brand--subtle--default --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--m-selected--before--BorderColor	(In light theme) #4394e5
--pf-v6-c-toggle-group__button--m-selected--before--BorderColor --pf-t--global--border--color--brand--subtle--clicked --pf-t--global--color--brand--subtle--300 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--m-selected--before--BorderWidth	0px
--pf-v6-c-toggle-group__button--m-selected--before--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--m-selected--after--BorderColor	(In light theme) #4394e5
--pf-v6-c-toggle-group__button--m-selected--after--BorderColor --pf-t--global--border--color--brand--subtle--clicked --pf-t--global--color--brand--subtle--300 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth	2px
--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth --pf-t--global--border--width--control--clicked --pf-t--global--border--width--200 2px
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor	(In light theme) #4394e5
--pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor --pf-t--global--border--color--brand--subtle--clicked --pf-t--global--color--brand--subtle--300 --pf-t--color--blue--40 #4394e5
	.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) #707070
--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--50 #707070
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--disabled--before--BorderColor	(In light theme) #8c8c8c
--pf-v6-c-toggle-group__button--disabled--before--BorderColor --pf-t--global--border--color--control--default --pf-t--global--border--color--300 --pf-t--color--gray--45 #8c8c8c
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor	(In light theme) #8c8c8c
--pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor --pf-t--global--border--color--control--default --pf-t--global--border--color--300 --pf-t--color--gray--45 #8c8c8c
	.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.25rem
--pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.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.25rem
--pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.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.25rem
--pf-v6-c-toggle-group__button--PaddingBlockStart --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.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.25rem
--pf-v6-c-toggle-group__button--PaddingBlockEnd --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.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) #e0f0ff
--pf-v6-c-toggle-group__button--BackgroundColor --pf-v6-c-toggle-group__button--hover--BackgroundColor --pf-t--global--color--brand--subtle--default --pf-t--global--color--brand--subtle--100 --pf-t--color--blue--10 #e0f0ff
	.pf-v6-c-toggle-group__button:is(:hover, :focus)	--pf-v6-c-toggle-group__button--Color	(In light theme) #151515
--pf-v6-c-toggle-group__button--Color --pf-v6-c-toggle-group__button--hover--Color --pf-t--global--text--color--on-brand--subtle--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.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) #4394e5
--pf-v6-c-toggle-group__button--before--BorderColor --pf-v6-c-toggle-group__button--hover--before--BorderColor --pf-t--global--border--color--brand--subtle--hover --pf-t--global--color--brand--subtle--300 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-toggle-group__button:is(:hover, :focus)	--pf-v6-c-toggle-group__button--after--BorderWidth	0px
--pf-v6-c-toggle-group__button--after--BorderWidth --pf-v6-c-toggle-group__button--hover--after--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-toggle-group__button:is(:hover, :focus)	--pf-v6-c-toggle-group__icon--Color	(In light theme) #1f1f1f
--pf-v6-c-toggle-group__icon--Color --pf-v6-c-toggle-group__icon--hover--Color --pf-t--global--icon--color--on-brand--subtle--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-toggle-group__button.pf-m-selected	--pf-v6-c-toggle-group__button--BackgroundColor	(In light theme) #e0f0ff
--pf-v6-c-toggle-group__button--BackgroundColor --pf-v6-c-toggle-group__button--m-selected--BackgroundColor --pf-t--global--color--brand--subtle--default --pf-t--global--color--brand--subtle--100 --pf-t--color--blue--10 #e0f0ff
	.pf-v6-c-toggle-group__button.pf-m-selected	--pf-v6-c-toggle-group__button--Color	(In light theme) #151515, 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--subtle--default, inherit --pf-t--global--text--color--regular, inherit --pf-t--global--text--color--100, inherit --pf-t--color--gray--95, inherit #151515, 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) #4394e5
--pf-v6-c-toggle-group__button--before--BorderColor --pf-v6-c-toggle-group__button--m-selected--before--BorderColor --pf-t--global--border--color--brand--subtle--clicked --pf-t--global--color--brand--subtle--300 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-toggle-group__button.pf-m-selected	--pf-v6-c-toggle-group__button--before--BorderWidth	0px
--pf-v6-c-toggle-group__button--before--BorderWidth --pf-v6-c-toggle-group__button--m-selected--before--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-toggle-group__button.pf-m-selected	--pf-v6-c-toggle-group__button--after--BorderColor	(In light theme) #4394e5
--pf-v6-c-toggle-group__button--after--BorderColor --pf-v6-c-toggle-group__button--m-selected--after--BorderColor --pf-t--global--border--color--brand--subtle--clicked --pf-t--global--color--brand--subtle--300 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-toggle-group__button.pf-m-selected	--pf-v6-c-toggle-group__button--after--BorderWidth	2px
--pf-v6-c-toggle-group__button--after--BorderWidth --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth --pf-t--global--border--width--control--clicked --pf-t--global--border--width--200 2px
	.pf-v6-c-toggle-group__button.pf-m-selected	--pf-v6-c-toggle-group__icon--Color	(In light theme) #1f1f1f
--pf-v6-c-toggle-group__icon--Color --pf-v6-c-toggle-group__icon--m-selected--Color --pf-t--global--icon--color--on-brand--subtle--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.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) #707070
--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--50 #707070
	.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) #8c8c8c
--pf-v6-c-toggle-group__button--before--BorderColor --pf-v6-c-toggle-group__button--disabled--before--BorderColor --pf-t--global--border--color--control--default --pf-t--global--border--color--300 --pf-t--color--gray--45 #8c8c8c
	.pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled)	--pf-v6-c-toggle-group__icon--Color	(In light theme) #707070
--pf-v6-c-toggle-group__icon--Color --pf-v6-c-toggle-group__icon--disabled--Color --pf-t--global--icon--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--50 #707070
	.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) #4394e5
--pf-v6-c-toggle-group__button--before--BorderInlineStartColor --pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor --pf-t--global--border--color--brand--subtle--clicked --pf-t--global--color--brand--subtle--300 --pf-t--color--blue--40 #4394e5
	.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) #8c8c8c
--pf-v6-c-toggle-group__button--before--BorderInlineStartColor --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor --pf-t--global--border--color--control--default --pf-t--global--border--color--300 --pf-t--color--gray--45 #8c8c8c