Examples
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 column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--PaddingTop | 0.375rem | ||
--pf-v5-c-toggle-group__button--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--PaddingRight | 1rem | ||
--pf-v5-c-toggle-group__button--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--PaddingBottom | 0.375rem | ||
--pf-v5-c-toggle-group__button--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--PaddingLeft | 1rem | ||
--pf-v5-c-toggle-group__button--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--FontSize | 0.875rem | ||
--pf-v5-c-toggle-group__button--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--LineHeight | calc(1rem * 1.5) | ||
--pf-v5-c-toggle-group__button--LineHeight calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) calc(1rem * 1.5) | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--Color | #151515 | ||
--pf-v5-c-toggle-group__button--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--BackgroundColor | #fff | ||
--pf-v5-c-toggle-group__button--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #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__button--hover--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--hover--ZIndex | 100 | ||
--pf-v5-c-toggle-group__button--hover--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--hover--before--BorderColor | #8a8d90 | ||
--pf-v5-c-toggle-group__button--hover--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--focus--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-toggle-group__button--focus--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--focus--ZIndex | 100 | ||
--pf-v5-c-toggle-group__button--focus--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--focus--before--BorderColor | #8a8d90 | ||
--pf-v5-c-toggle-group__button--focus--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--disabled--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-toggle-group__button--disabled--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--disabled--Color | #6a6e73 | ||
--pf-v5-c-toggle-group__button--disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--before--BorderWidth | 1px | ||
--pf-v5-c-toggle-group__button--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-toggle-group__button--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__item--item--MarginLeft | calc(-1 * 1px) | ||
--pf-v5-c-toggle-group__item--item--MarginLeft calc(-1 * --pf-v5-global--BorderWidth--sm) calc(-1 * $pf-v5-global--BorderWidth--sm) calc(-1 * 1px) | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius | 3px | ||
--pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius | 3px | ||
--pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius | 3px | ||
--pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius | 3px | ||
--pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__icon--text--MarginLeft | 0.5rem | ||
--pf-v5-c-toggle-group__icon--text--MarginLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--m-selected--BackgroundColor | #e7f1fa | ||
--pf-v5-c-toggle-group__button--m-selected--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #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__button--m-selected--before--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--m-selected--ZIndex | 100 | ||
--pf-v5-c-toggle-group__button--m-selected--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 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--m-compact__button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 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--m-compact__button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group--m-compact__button--FontSize | 0.75rem | ||
--pf-v5-c-toggle-group--m-compact__button--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-toggle-group.pf-m-compact | --pf-v5-c-toggle-group__button--PaddingTop | 0 | ||
--pf-v5-c-toggle-group__button--PaddingTop --pf-v5-c-toggle-group--m-compact__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__button--PaddingRight --pf-v5-c-toggle-group--m-compact__button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-toggle-group.pf-m-compact | --pf-v5-c-toggle-group__button--PaddingBottom | 0 | ||
--pf-v5-c-toggle-group__button--PaddingBottom --pf-v5-c-toggle-group--m-compact__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__button--PaddingLeft --pf-v5-c-toggle-group--m-compact__button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 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--FontSize --pf-v5-c-toggle-group--m-compact__button--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-toggle-group__button:hover | --pf-v5-c-toggle-group__button--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-toggle-group__button--BackgroundColor --pf-v5-c-toggle-group__button--hover--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-toggle-group__button:hover | --pf-v5-c-toggle-group__button--ZIndex | 100 | ||
--pf-v5-c-toggle-group__button--ZIndex --pf-v5-c-toggle-group__button--hover--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-toggle-group__button:hover | --pf-v5-c-toggle-group__button--before--BorderColor | #8a8d90 | ||
--pf-v5-c-toggle-group__button--before--BorderColor --pf-v5-c-toggle-group__button--hover--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-toggle-group__button:focus | --pf-v5-c-toggle-group__button--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-toggle-group__button--BackgroundColor --pf-v5-c-toggle-group__button--focus--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-toggle-group__button:focus | --pf-v5-c-toggle-group__button--ZIndex | 100 | ||
--pf-v5-c-toggle-group__button--ZIndex --pf-v5-c-toggle-group__button--focus--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-toggle-group__button:focus | --pf-v5-c-toggle-group__button--before--BorderColor | #8a8d90 | ||
--pf-v5-c-toggle-group__button--before--BorderColor --pf-v5-c-toggle-group__button--focus--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-toggle-group__button.pf-m-selected | --pf-v5-c-toggle-group__button--BackgroundColor | #e7f1fa | ||
--pf-v5-c-toggle-group__button--BackgroundColor --pf-v5-c-toggle-group__button--m-selected--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #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--Color var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit) 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--ZIndex --pf-v5-c-toggle-group__button--m-selected--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 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--before--BorderColor --pf-v5-c-toggle-group__button--m-selected--before--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-toggle-group__button:disabled | --pf-v5-c-toggle-group__button--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-toggle-group__button--BackgroundColor --pf-v5-c-toggle-group__button--disabled--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-toggle-group__button:disabled | --pf-v5-c-toggle-group__button--Color | #6a6e73 | ||
--pf-v5-c-toggle-group__button--Color --pf-v5-c-toggle-group__button--disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
View source on GitHub
