Info alert:Beta feature
This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.
Examples
Props
ToggleGroup
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| aria-label | string | No | Accessible label for the toggle group | |
| children | React.ReactNode | No | Content rendered inside the toggle group | |
| className | string | No | Additional classes added to the toggle group | |
| variant | ToggleGroupVariant | 'light' | 'default' | No | ToggleGroupVariant.default | Adds toggle group variant styles |
ToggleGroupItem
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| aria-label | string | No | '' | required when icon is used with no supporting text |
| buttonId | string | No | '' | Optional id for the button within the toggle group item |
| className | string | No | Additional classes added to the toggle group item | |
| icon | React.ReactNode | No | Icon rendered inside the toggle group item | |
| isDisabled | boolean | No | false | Flag indicating if the toggle group item is disabled |
| isSelected | boolean | No | false | Flag indicating if the toggle group item is selected |
| onChange | (selected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => void | No | () => {} | A callback for when the toggle group item selection changes. |
| text | React.ReactNode | No | Text rendered inside the toggle group item |
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 | #f0f0f0 | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--hover--BackgroundColor | #d2d2d2 | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--focus--BackgroundColor | #d2d2d2 | |
| .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__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-light--BackgroundColor | #fff | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--m-selected--BackgroundColor | #06c | |
| .pf-c-toggle-group | --pf-c-toggle-group__button--m-selected--Color | #fff | |
| .pf-c-toggle-group__button.pf-m-light | --pf-c-toggle-group__button--BackgroundColor | #fff | |
| .pf-c-toggle-group__button:hover | --pf-c-toggle-group__button--BackgroundColor | #d2d2d2 | |
| .pf-c-toggle-group__button:focus | --pf-c-toggle-group__button--BackgroundColor | #d2d2d2 | |
| .pf-c-toggle-group__button.pf-m-selected | --pf-c-toggle-group__button--BackgroundColor | #06c | |
| .pf-c-toggle-group__button.pf-m-selected | --pf-c-toggle-group__button--Color | #fff | |
| .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
