Behavior comparison
Icon button vs Link
Decisive difference
Icon button performs an action and carries its name in an accessible label; Link navigates to a destination and needs a real href.
Choice criteria, links and sources
- Icon buttonChoose Icon button if activation does something in place, such as copy, close, or favorite.Open entry Icon button
- LinkChoose Link if activation goes to another page or route, even when only an icon is shown.Open entry Link
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?
Icon button
Shared trial context
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.
Link
Mission
Link
Open Billing with Enter, return, then use the browser context menu on the external status link.
The service includes three shared spaces.
BillingBilling details
This section is a real navigation destination.
Back to summaryStep 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
- Each descriptive link has a real destination and a focus style distinct from surrounding text.
- Edge case
- The external destination is identified in accessible text when opening behavior or context would otherwise surprise users.
What this example shows
Icon button performs an action like Button but omits visible text; Link still requires a real navigation destination.
Which fits your need?
Icon button
A familiar action repeats in a dense toolbar
Link
Moving to another page or route
Difference and sources
Icon button performs an action like Button but omits visible text; Link still requires a real navigation destination.
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
Icon button
Runs one action and always has an accessible name; a tooltip is only supplemental.
Link
Exposes a URL and standard browser behaviors such as opening or copying the destination.
- Trigger
Icon button
Click, tap, Enter, or Space on the icon control.
Link
Click, tap, or Enter on linked text or its named destination.
- Accessible role
Icon button
button
Link
a[href]
Nine dimensions
- Trigger
Icon button
Click, tap, Enter, or Space on the icon control.
Link
Click, tap, or Enter on linked text or its named destination.
- Modality
Icon button
Non-modal action control; its compact appearance does not change button behavior.
Link
Navigation, not a modal action; it changes location or opens a resource.
- Placement
Icon button
In a toolbar or next to the object affected by its single action.
Link
Inline with content or inside a navigation region where the destination is meaningful.
- Interactivity
Icon button
Runs one action and always has an accessible name; a tooltip is only supplemental.
Link
Exposes a URL and standard browser behaviors such as opening or copying the destination.
- Focus
Icon button
The full button target, not only the glyph, receives a visible focus indicator.
Link
Every link has a visible focus indicator and its hit area does not overlap adjacent links.
- Dismissal
Icon button
The button itself does not dismiss; any surface it controls follows that surface's separate contract.
Link
Not applicable: navigation is handled by browser history rather than dismissing the link.
- Accessible role
Icon button
button
Link
a[href]
- Use case
Icon button
A familiar action repeats in a dense toolbar
Link
Moving to another page or route
- Mobile behavior
Icon button
Keep a large invisible or visible touch target and never depend on hover to explain the action.
Link
Give standalone links enough touch area and spacing while preserving normal inline reading.
| Dimension | Icon buttonIcon button | LinkLink |
|---|---|---|
| Trigger | Click, tap, Enter, or Space on the icon control. | Click, tap, or Enter on linked text or its named destination. |
| Modality | Non-modal action control; its compact appearance does not change button behavior. | Navigation, not a modal action; it changes location or opens a resource. |
| Placement | In a toolbar or next to the object affected by its single action. | Inline with content or inside a navigation region where the destination is meaningful. |
| Interactivity | Runs one action and always has an accessible name; a tooltip is only supplemental. | Exposes a URL and standard browser behaviors such as opening or copying the destination. |
| Focus | The full button target, not only the glyph, receives a visible focus indicator. | Every link has a visible focus indicator and its hit area does not overlap adjacent links. |
| Dismissal | The button itself does not dismiss; any surface it controls follows that surface's separate contract. | Not applicable: navigation is handled by browser history rather than dismissing the link. |
| Accessible role | button | a[href] |
| Use case | A familiar action repeats in a dense toolbar | Moving to another page or route |
| Mobile behavior | Keep a large invisible or visible touch target and never depend on hover to explain the action. | Give standalone links enough touch area and spacing while preserving normal inline reading. |