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 "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.

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.