Examples
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 column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--PaddingBlockStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--PaddingInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--PaddingBlockEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--FontSize | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--LineHeight | 1.5 | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--ZIndex | auto | ||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--hover--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--hover--ZIndex | 100 | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--hover--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--before--BorderWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__item--item--MarginInlineStart | calc(-1 * 1px) | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius | 4px | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius | 4px | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius | 4px | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius | 4px | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__icon--text--MarginInlineStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--m-selected--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--m-selected--Color | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--m-selected--before--BorderColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--m-selected--ZIndex | 100 | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--disabled--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--disabled--before--BorderColor | (In light theme) #a3a3a3 | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group__button--disabled--ZIndex | 100 | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart | 0 | ||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd | 0 | ||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-toggle-group) | --pf-v6-c-toggle-group--m-compact__button--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-toggle-group.pf-m-compact | --pf-v6-c-toggle-group__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.pf-m-compact | --pf-v6-c-toggle-group__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.pf-m-compact | --pf-v6-c-toggle-group__button--FontSize | 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:is(:hover, :focus) | --pf-v6-c-toggle-group__button--ZIndex | 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.pf-m-selected | --pf-v6-c-toggle-group__button--BackgroundColor | (In light theme) #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.pf-m-selected | --pf-v6-c-toggle-group__button--ZIndex | 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:is(:disabled, .pf-m-disabled) | --pf-v6-c-toggle-group__button--BackgroundColor | (In light theme) #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:is(:disabled, .pf-m-disabled) | --pf-v6-c-toggle-group__button--ZIndex | 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__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__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 | ||
| ||||
