IconButton

Use cases

Make sure the IconButton is suitable for your use case. There may be other, more appropriate components available.

Use case	Button	IconButton	ToggleButton
Call-to-action	✅	❌	❌
Commit/submit (modal, workflow, form)	✅	❌	❌
Trigger an action within a toolbar	❌	✅	❌
Table cell (inline action)	❌	✅	❌
Group related options within a toolbar	❌	❌	✅

StrataKit MUI modifications

• The action prop is not supported.
• The LinkComponent prop is not supported. Use the more flexible render prop instead.
• Ripple effect removed. The centerRipple, disableRipple, disableFocusRipple, disableTouchRipple, focusRipple, TouchRippleProps and touchRippleRef props are not supported.
• The "default", "info", "success", "warning", "inherit" colors have been removed. The default color is now "secondary".
• The size options ("small", "medium", "large") have all been decreased in height.
• A label prop has been added. When specified, it is used as the IconButton’s accessible name and is also shown in a tooltip on hover and focus. This is the recommended way to set the accessible name and tooltip.
• The title prop is automatically mapped to label as a fallback, providing better compatibility with external components that use the native title attribute.
• A labelPlacement prop has been added to control the placement of a tooltip that is shown when the label prop is specified.

Examples

Badge

Use a Badge component to indicate the functionality behind the IconButton is in need of attention. For example, an IconButton for notifications can indicate unread notifications.

Make sure to provide an accessible description in the form of a visually hidden text explaining the significance of the badge’s presence. In this case, the value is “You have 4 unread notifications”.

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.

✅ Do

• Use the label prop to provide an accessible name and tooltip for the IconButton.
• Use in toolbars.
• Use it only when a stand-alone icon effectively communicates the action.

🚫 Don’t

• Don’t use to replace buttons.
• Don’t use if an icon doesn’t clearly convey the action. Use a Button with a text label or a more suitable icon.
• Don’t set both title and label at the same time. Use only label instead.