The basic ToggleButton allows users to switch between two states.

Use icons and text in toggle buttons if it's important to visually reinforce the theme of the options or if providing additional context may help decision making (for example, selecting a document type or a text style).

Pass aria-hidden={true} to the icon so the screen reader doesn't announce its text description.

• To reduce visual noise and mitigate alignment issues, use icons in toggle button labels consistently across all options in a toggle button group.
• Icons are placed to the left of the text only to describe the button.

ToggleButtonGroup allows users to make a mutually exclusive selection from a set of related commands—with only one option selected at a time.

• A toggle button group should always contain two or more options related by function or context. Examples include text alignment (left, center, right) or speed selection (slow, medium, fast).
• Use text description in addition to or instead of an icon if the options in the toggle button group are high priority. Users will be less likely to overlook the options.

You can use toggle buttons with icons only.

• An icon-only toggle button should be self-explanatory, ideally using well-known symbols. If the purpose of the button isn’t clear from the icon alone, add a label.
• Provide an accessible label for each toggle button.
• Use Tooltip to provide additional context for each toggle button.

You can configure toggle buttons to only display text if you can’t identify a suitable or intuitive icon.

You can disable toggle buttons if required by context or user permissions. Disabling a toggle button will suppress all functionality.

By default, a toggle button group has horizontal alignment. If you can present the options in a stacked layout, orientate the group vertically using the orientation=”vertical” prop.

The basic ToggleButton allows users to switch between two states.

Use icons and text in toggle buttons if it's important to visually reinforce the theme of the options or if providing additional context may help decision making (for example, selecting a document type or a text style).

Pass aria-hidden={true} to the icon so the screen reader doesn't announce its text description.

• To reduce visual noise and mitigate alignment issues, use icons in toggle button labels consistently across all options in a toggle button group.
• Icons are placed to the left of the text only to describe the button.

ToggleButtonGroup allows users to make a mutually exclusive selection from a set of related commands—with only one option selected at a time.

• A toggle button group should always contain two or more options related by function or context. Examples include text alignment (left, center, right) or speed selection (slow, medium, fast).
• Use text description in addition to or instead of an icon if the options in the toggle button group are high priority. Users will be less likely to overlook the options.

You can use toggle buttons with icons only.

• An icon-only toggle button should be self-explanatory, ideally using well-known symbols. If the purpose of the button isn’t clear from the icon alone, add a label.
• Provide an accessible label for each toggle button.
• Use Tooltip to provide additional context for each toggle button.

You can configure toggle buttons to only display text if you can’t identify a suitable or intuitive icon.

You can disable toggle buttons if required by context or user permissions. Disabling a toggle button will suppress all functionality.

By default, a toggle button group has horizontal alignment. If you can present the options in a stacked layout, orientate the group vertically using the orientation=”vertical” prop.

The basic ToggleButton allows users to switch between two states.

Use icons and text in toggle buttons if it's important to visually reinforce the theme of the options or if providing additional context may help decision making (for example, selecting a document type or a text style).

Pass aria-hidden={true} to the icon so the screen reader doesn't announce its text description.

• To reduce visual noise and mitigate alignment issues, use icons in toggle button labels consistently across all options in a toggle button group.
• Icons are placed to the left of the text only to describe the button.

ToggleButtonGroup allows users to make a mutually exclusive selection from a set of related commands—with only one option selected at a time.

• A toggle button group should always contain two or more options related by function or context. Examples include text alignment (left, center, right) or speed selection (slow, medium, fast).
• Use text description in addition to or instead of an icon if the options in the toggle button group are high priority. Users will be less likely to overlook the options.

You can use toggle buttons with icons only.

• An icon-only toggle button should be self-explanatory, ideally using well-known symbols. If the purpose of the button isn’t clear from the icon alone, add a label.
• Provide an accessible label for each toggle button.
• Use Tooltip to provide additional context for each toggle button.

You can configure toggle buttons to only display text if you can’t identify a suitable or intuitive icon.

You can disable toggle buttons if required by context or user permissions. Disabling a toggle button will suppress all functionality.

By default, a toggle button group has horizontal alignment. If you can present the options in a stacked layout, orientate the group vertically using the orientation=”vertical” prop.