Skip to Content

Toggle group

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesDocumentationCSS Variables



With icon





AttributeApplied toOutcome
aria-label="[button label text]".pf-c-toggle-group__buttonProvides an accessible name for the button when an icon is used instead of text. Required when icon is used with no supporting text a button element is used, indicates that it is unavailable and removes it from keyboard focus. Required when button is disabled


ClassApplied toOutcome
.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. the toggle button group button for the selected state. the toggle button group button to have a light background to be used on a darker background.

CSS Variables