Behavior comparison
Button vs Link
Decisive difference
Button performs an action in the current page; Link goes to a destination with an href and the browser’s navigation behavior.
Choice criteria, links and sources
- ButtonChoose Button if activation changes something here, such as submit, open, or delete.Open entry Button
- LinkChoose Link if activation takes the user to another page or route that can open in a new tab.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?
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.
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
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
Link
Moving to another page or route
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.
Link
Exposes a URL and standard browser behaviors such as opening or copying the destination.
- Trigger
Button
Click, tap, Enter, or Space on the named control.
Link
Click, tap, or Enter on linked text or its named destination.
- Accessible role
Button
button
Link
a[href]
Nine dimensions
- Trigger
Button
Click, tap, Enter, or Space on the named control.
Link
Click, tap, or Enter on linked text or its named destination.
- Modality
Button
Non-modal action control; any modal result is a separate component.
Link
Navigation, not a modal action; it changes location or opens a resource.
- Placement
Button
Within the form, toolbar, or action area where the command applies.
Link
Inline with content or inside a navigation region where the destination is meaningful.
- Interactivity
Button
Runs an action and exposes disabled or pending state while duplicate activation is unsafe.
Link
Exposes a URL and standard browser behaviors such as opening or copying the destination.
- Focus
Button
A high-contrast focus indicator remains visible in every enabled visual variant and pending state.
Link
Every link has a visible focus indicator and its hit area does not overlap adjacent links.
- Dismissal
Button
Not applicable: an action button does not open a surface unless that separate relationship is defined.
Link
Not applicable: navigation is handled by browser history rather than dismissing the link.
- Accessible role
Button
button
Link
a[href]
- Use case
Button
Submitting or resetting a form
Link
Moving to another page or route
- Mobile behavior
Button
Provide a generous touch target and keep primary and destructive actions visually distinct.
Link
Give standalone links enough touch area and spacing while preserving normal inline reading.
| 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. |