Behavior comparison
Choose Button for: Submitting or resetting a form. Choose Link for: Moving to another page or route.
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 Link when Link navigates and has an href; Button performs an action, while Icon button remains an action even when represented only by an icon.
| Dimension | ButtonButton | LinkLink |
|---|---|---|
| Trigger | Click, tap, Enter, or Space on the named control. | Click, tap, or Enter on linked text or its named destination. |
| Modality | Non-modal action control; any modal result is a separate component. | Navigation, not a modal action; it changes location or opens a resource. |
| Placement | Within the form, toolbar, or action area where the command applies. | Inline with content or inside a navigation region where the destination is meaningful. |
| Interactivity | Runs an action and exposes disabled or pending state while duplicate activation is unsafe. | Exposes a URL and standard browser behaviors such as opening or copying the destination. |
| Focus | A high-contrast focus indicator remains visible in every enabled visual variant and pending state. | Every link has a visible focus indicator and its hit area does not overlap adjacent links. |
| Dismissal | Not applicable: an action button does not open a surface unless that separate relationship is defined. | Not applicable: navigation is handled by browser history rather than dismissing the link. |
| Accessible role | button | a[href] |
| Use case | Submitting or resetting a form | Moving to another page or route |
| Mobile behavior | Provide a generous touch target and keep primary and destructive actions visually distinct. | Give standalone links enough touch area and spacing while preserving normal inline reading. |