Examples
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-label="[button label text]" | .pf-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-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-c-toggle-group | <div> | Initiates the toggle group. Required |
.pf-c-toggle-group__button | <button> | Initiates the toggle group button. Required |
.pf-c-toggle-group__item | <div> | Initiates the toggle group item wrapper. Required |
.pf-c-toggle-group__text | <span> | Initiates the toggle button text element. |
.pf-c-toggle-group__icon | <span> | Initiates the toggle button icon element. |
.pf-m-compact | .pf-c-toggle-group | Modifies the toggle group for compact styles. |
.pf-m-selected | .pf-c-toggle-group__button | Modifies the toggle button group button for the selected state. |
CSS variables
| .pf-c-toggle-group | --pf-c-toggle-group__button--PaddingTop | 0.375rem | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--PaddingRight | 1rem | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--PaddingBottom | 0.375rem | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--PaddingLeft | 1rem | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--FontSize | 0.875rem | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--LineHeight | calc(1rem * 1.5) | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--Color | #151515 | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--BackgroundColor | #fff | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--ZIndex | auto | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--hover--BackgroundColor | #f0f0f0 | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--hover--ZIndex | 100 | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--hover--before--BorderColor | #8a8d90 | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--focus--BackgroundColor | #f0f0f0 | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--focus--ZIndex | 100 | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--focus--before--BorderColor | #8a8d90 | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--disabled--BackgroundColor | #d2d2d2 | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--disabled--Color | #6a6e73 | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--before--BorderWidth | 1px | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--before--BorderColor | #d2d2d2 | |
| .pf-c-toggle-group | --pf-c-toggle-group__item--item--MarginLeft | calc(-1 * 1px) | |
| .pf-c-toggle-group | --pf-c-toggle-group__item--first-child__button--BorderTopLeftRadius | 3px | |
| .pf-c-toggle-group | --pf-c-toggle-group__item--first-child__button--BorderBottomLeftRadius | 3px | |
| .pf-c-toggle-group | --pf-c-toggle-group__item--last-child__button--BorderTopRightRadius | 3px | |
| .pf-c-toggle-group | --pf-c-toggle-group__item--last-child__button--BorderBottomRightRadius | 3px | |
| .pf-c-toggle-group | --pf-c-toggle-group__icon--text--MarginLeft | 0.5rem | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--m-selected--BackgroundColor | #e7f1fa | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--m-selected--before--BorderColor | #06c | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--m-selected--ZIndex | 100 | |
| .pf-c-toggle-group | --pf-c-toggle-group--m-compact__button--PaddingTop | 0 | |
| .pf-c-toggle-group | --pf-c-toggle-group--m-compact__button--PaddingRight | 0.5rem | |
| .pf-c-toggle-group | --pf-c-toggle-group--m-compact__button--PaddingBottom | 0 | |
| .pf-c-toggle-group | --pf-c-toggle-group--m-compact__button--PaddingLeft | 0.5rem | |
| .pf-c-toggle-group | --pf-c-toggle-group--m-compact__button--FontSize | 0.75rem | |
| .pf-c-toggle-group.pf-m-compact | --pf-c-toggle-group__button--PaddingTop | 0 | |
| .pf-c-toggle-group.pf-m-compact | --pf-c-toggle-group__button--PaddingRight | 0.5rem | |
| .pf-c-toggle-group.pf-m-compact | --pf-c-toggle-group__button--PaddingBottom | 0 | |
| .pf-c-toggle-group.pf-m-compact | --pf-c-toggle-group__button--PaddingLeft | 0.5rem | |
| .pf-c-toggle-group.pf-m-compact | --pf-c-toggle-group__button--FontSize | 0.75rem | |
| .pf-c-toggle-group__button:hover | --pf-c-toggle-group__button--BackgroundColor | #f0f0f0 | |
| .pf-c-toggle-group__button:hover | --pf-c-toggle-group__button--ZIndex | 100 | |
| .pf-c-toggle-group__button:hover | --pf-c-toggle-group__button--before--BorderColor | #8a8d90 | |
| .pf-c-toggle-group__button:focus | --pf-c-toggle-group__button--BackgroundColor | #f0f0f0 | |
| .pf-c-toggle-group__button:focus | --pf-c-toggle-group__button--ZIndex | 100 | |
| .pf-c-toggle-group__button:focus | --pf-c-toggle-group__button--before--BorderColor | #8a8d90 | |
| .pf-c-toggle-group__button.pf-m-selected | --pf-c-toggle-group__button--BackgroundColor | #e7f1fa | |
| .pf-c-toggle-group__button.pf-m-selected | --pf-c-toggle-group__button--ZIndex | 100 | |
| .pf-c-toggle-group__button.pf-m-selected | --pf-c-toggle-group__button--before--BorderColor | #06c | |
| .pf-c-toggle-group__button:disabled | --pf-c-toggle-group__button--BackgroundColor | #d2d2d2 | |
| .pf-c-toggle-group__button:disabled | --pf-c-toggle-group__button--Color | #6a6e73 | |
View source on GitHub
