SkillCodexOpen favorites and history
Behavior comparison
Choose Button for: Submitting or resetting a form. Choose Icon button for: A familiar action repeats in a dense toolbar.
Decision
Does the control trigger an action, change location, or need to remain icon-only?
Choose Button when Button performs an action; Link navigates to a destination, while Icon button is the compact button variant whose visible label is replaced by an icon. Choose Icon button when Icon button performs an action like Button but omits visible text; Link still requires a real navigation destination.
| Dimension | ButtonButton | Icon buttonIcon button |
|---|---|---|
| Trigger | Click, tap, Enter, or Space on the named control. | Click, tap, Enter, or Space on the icon control. |
| Modality | Non-modal action control; any modal result is a separate component. | Non-modal action control; its compact appearance does not change button behavior. |
| Placement | Within the form, toolbar, or action area where the command applies. | In a toolbar or next to the object affected by its single action. |
| Interactivity | Runs an action and exposes disabled or pending state while duplicate activation is unsafe. | Runs one action and always has an accessible name; a tooltip is only supplemental. |
| Focus | A high-contrast focus indicator remains visible in every enabled visual variant and pending state. | The full button target, not only the glyph, receives a visible focus indicator. |
| Dismissal | Not applicable: an action button does not open a surface unless that separate relationship is defined. | The button itself does not dismiss; any surface it controls follows that surface's separate contract. |
| Accessible role | button | button |
| Use case | Submitting or resetting a form | A familiar action repeats in a dense toolbar |
| Mobile behavior | Provide a generous touch target and keep primary and destructive actions visually distinct. | Keep a large invisible or visible touch target and never depend on hover to explain the action. |
