Behavior comparison
Button vs Icon button
Decisive difference
Button shows a visible text label; Icon button performs the same kind of action but replaces the visible label with an icon and an accessible name.
Choice criteria, links and sources
- ButtonChoose Button if the action is primary or unfamiliar and a visible label prevents misunderstanding.Open entry Button
- Icon buttonChoose Icon button if a familiar action repeats in a dense toolbar and space matters more than a visible label.Open entry Icon button
See the nine dimensionsSee the sources
Trigger or navigate
Try it
Does the control trigger an action, change location, or need to remain icon-only?
Button
Shared trial context
Button
Mission
Button
Activate Save with Space, verify the pending state blocks a second request, and recover from a server error.
Subject: Weekly summary
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The enabled submit button has a clear label, visible focus, and sufficient text contrast.
- Edge case
- During submission, the button preserves its width, exposes Saving, and blocks duplicate activation without removing focus.
Icon button
Mission
Icon button
Reach Copy with Tab, hear its name, activate with Space, then reveal its supplementary tooltip.
pnpm test
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The full button target has a visible focus ring, decorative icon, and independent accessible name Copy code.
- Edge case
- When the icon cannot load, the accessible name and button target remain intact and the action is still understandable to assistive technology.
What this example shows
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.
Which fits your need?
Button
Submitting or resetting a form
Icon button
A familiar action repeats in a dense toolbar
Difference and sources
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.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Control
The interactive element that receives input and exposes state.
Decision
Family question
Does the control trigger an action, change location, or need to remain icon-only?
Three criteria to choose
- Interactivity
Button
Runs an action and exposes disabled or pending state while duplicate activation is unsafe.
Icon button
Runs one action and always has an accessible name; a tooltip is only supplemental.
- Trigger
Button
Click, tap, Enter, or Space on the named control.
Icon button
Click, tap, Enter, or Space on the icon control.
- Accessible role
Button
button
Icon button
button
Nine dimensions
- Trigger
Button
Click, tap, Enter, or Space on the named control.
Icon button
Click, tap, Enter, or Space on the icon control.
- Modality
Button
Non-modal action control; any modal result is a separate component.
Icon button
Non-modal action control; its compact appearance does not change button behavior.
- Placement
Button
Within the form, toolbar, or action area where the command applies.
Icon button
In a toolbar or next to the object affected by its single action.
- Interactivity
Button
Runs an action and exposes disabled or pending state while duplicate activation is unsafe.
Icon button
Runs one action and always has an accessible name; a tooltip is only supplemental.
- Focus
Button
A high-contrast focus indicator remains visible in every enabled visual variant and pending state.
Icon button
The full button target, not only the glyph, receives a visible focus indicator.
- Dismissal
Button
Not applicable: an action button does not open a surface unless that separate relationship is defined.
Icon button
The button itself does not dismiss; any surface it controls follows that surface's separate contract.
- Accessible role
Button
button
Icon button
button
- Use case
Button
Submitting or resetting a form
Icon button
A familiar action repeats in a dense toolbar
- Mobile behavior
Button
Provide a generous touch target and keep primary and destructive actions visually distinct.
Icon button
Keep a large invisible or visible touch target and never depend on hover to explain the action.
| 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. |