ToggleButton

StrataKit MUI modifications

• A label prop has been added. When specified, it is used as the ToggleButton’s accessible name and is also shown in a tooltip on hover and focus.
• A labelPlacement prop has been added to control the placement of a tooltip that is shown when the label prop is specified.
• ToggleButtons are styled to match the visual appearance of the IconButton component. Borders are displayed only when the buttons are wrapped in a ToggleButtonGroup. Standalone ToggleButtons do not have borders.
• ToggleButtons can now be rendered as regular Buttons to display text.

Examples

Standalone

Use the selected and onChange props to control the selected state of a standalone ToggleButton when it is not nested within a ToggleButtonGroup component.

Sizes

• Small: Use in compact interfaces where space is limited.
• Medium: Default size, suitable for most use cases.
• Large: Use in spacious layouts where a more prominent button is needed.

Text

To display text within a ToggleButton, use the render prop to render a Button. Additionally, the label prop should be omitted, as the visible text already provides an accessible name.

Exclusive selection

In the example above, the exclusive prop is set on the ToggleButtonGroup, which allows only one button to be selected at a time. Additionally, the handler used in the onChange prop enforces that at least one button is always selected.

✅ Do

• Use ToggleButton for actions that have an on/off state.
• Use the label prop in icon-only ToggleButtons to provide a descriptive, accessible name.
• Use ToggleButtonGroup to group multiple related ToggleButtons.

🚫 Don’t

• Don’t use to replace buttons.
• Don’t mix text and icon-only ToggleButtons in the same group.