# Button or link?

[Website version](https://patterns.alexanderclaes.com/patterns/button-or-link/)

Updated 28 October 2026

Links lead to resources or locations. Buttons trigger actions.

## Recommendation

Use an anchor with an href for navigation and a native button for an action.

## Problem

Something looks clickable. What should it be?

## Choose a link or button by behavior

- A link opens a guide, downloads a resource, or moves to a page section.
- A button submits a form, opens a dialog, or changes a setting. Form submission can still lead to a new page.

## Button and link mistakes to avoid

- A clickable div that requires rebuilding keyboard behavior.
- An anchor with href='#' used for an action; it creates misleading navigation behavior.

## Example

[View the example on the website](https://patterns.alexanderclaes.com/patterns/button-or-link/#example).

## Implementation

1. Start with the semantic HTML element, then apply the visual style you need.
2. Give actions explicit labels. Set type='button' for non-submit buttons associated with a form.
3. Preserve link behaviors such as opening in a new tab, copying the destination, and using the context menu.
4. Keep keyboard focus visible. When a control has visible text, its accessible name must include that text; using the same wording is usually simplest.

## Tradeoffs

A link may look like a prominent button while remaining a link. Visual hierarchy and element semantics solve different problems; choose each intentionally.

## Verification

Can you Tab to both controls, activate buttons with Enter or Space and links with Enter, and open a link in a new tab?

## References

- [W3C · Button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
- [W3C · Link pattern](https://www.w3.org/WAI/ARIA/apg/patterns/link/)
- [WHATWG · The button element](https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element)
- [W3C · Label in name](https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html)

## Related patterns

- [Confirmation or undo?](https://patterns.alexanderclaes.com/patterns/destructive-actions.md)
- [Tabs or page navigation?](https://patterns.alexanderclaes.com/patterns/tabs-or-navigation.md)