When should a control be a link vs a button, and why does it matter?

Published Read 3 min read

On this page

A control should be a link when it navigates the user to another place, and a button when it performs an action, and the element must match the behavior regardless of how either is styled. The rule is behavior decides the element, not appearance. This is not a stylistic preference dressed up as a guideline, because the choice between the two underlying elements drives keyboard support, screen-reader meaning, and the user’s own expectations. A link styled to look like a button, or a button styled to look like a link, can pass for the other visually while breaking the things that make the control usable, so the question is always what the control does, not what it looks like.

The reasoning is that the link and the button are not interchangeable wrappers around a click, they carry different machinery and different promises. A real link, an anchor with a destination, can be opened in a new tab, copied, bookmarked, and followed with the keyboard the way users expect navigation to work, and a screen reader announces it as a link, which tells a non-visual user “this takes you somewhere.” A real button is announced as a button, “this does something,” and activates with both the space and enter keys, which is the action grammar assistive technology and keyboard users rely on. The “style whichever element is convenient to look like the other” habit severs the visible meaning from the actual semantics, so the control lies to everyone who is not navigating it by eye and mouse.

Consider a “Download report” control. If it is built as a button styled like a link, a sighted mouse user notices nothing wrong, but a screen-reader user hears it announced incorrectly for what it does, and a keyboard user may find the wrong activation keys respond. The sharper failure is the inverse: a navigation control built as a clickable styled element that is neither a real link nor a real button, with no destination and no semantic role, simply vanishes from the keyboard order and the screen reader entirely, leaving those users unable to reach it at all. The accessibility stakes are not a side effect; they are the whole reason the distinction is load-bearing.

One case sits outside this: appearance and semantics are allowed to diverge as long as the semantics stay true to the behavior. A link may legitimately be styled to look like a button when navigation deserves visual prominence, and a button may be styled to look like a link for a low-emphasis action, and both are fine because the underlying element still matches what the control does. There are also genuine edge cases worth resolving deliberately rather than by accident, such as a control that both navigates and performs an action, where the dominant behavior should decide the element and the secondary effect should be handled without faking a different role. What breaks things is using the wrong element underneath, or inventing a generic clickable that is neither, leaving keyboard and screen-reader users with a control that has no role at all. The styling is free; the semantic role is not, and treating it as negotiable is what turns a small convenience into a barrier.

When you build a control, ask first whether it sends the user somewhere or makes something happen, then choose a real link for navigation and a real button for action, and only afterward style it however the hierarchy demands. Never pick the element by convenience and patch the appearance to match, because that trades away keyboard access, screen-reader meaning, and predictability for nothing. Let behavior decide the element, and the control will work for every user, not just the ones using a mouse.

Related posts:

  1. When does a carousel help vs hide content nobody scrolls to? A carousel helps when users expect to browse a set of equivalent items and will actively engage with its controls, and it hides content the moment it parks important things......
  2. At what point does tight letter-spacing stop looking refined and start hurting legibility? Tightening letter-spacing crosses from refined into harmful at the point where letters begin to touch, merge, or blur at the size they are read, and that point depends almost entirely......
  3. At what point does a strong hero flatten everything below it? A hero flattens the page the moment the section directly below it stops earning attention on its own. That is the line, and it is a behavioral test, not a......
  4. When should motion be subtle vs the point of the interaction? Motion should be subtle when it supports a task and must stay out of the way, and it can be the point when the interaction is itself the experience. The......
  5. When is auto-playing content an accessibility problem vs fine? Auto-playing content becomes an accessibility problem when it moves, sounds, or changes for more than a moment with no easy way to pause or stop it, and it is fine......
  6. Should a hover effect change instantly or ease in? Use a short ease, not a hard snap and not a slow fade. A brief transition on hover, roughly 100 to 200 milliseconds, feels smoother and more deliberate than an......
  7. Why do stock photos often make a design feel less trustworthy? Stock photos often make a design feel less trustworthy because generic, obviously staged imagery reads as inauthentic, and a viewer who recognizes it instantly registers it as filler that says......
  8. How do you animate a state change so it reads as cause and effect? You make a state change read as cause and effect by connecting the trigger to the result through continuity, of position, of shape, or of motion, so the user watches......
  9. How do you design a pricing table that moves people to decide instead of stalling? A pricing table moves people to decide by reducing the cognitive load of comparison: limit the options to a comparable few, make the differences between them scannable at a glance,......
  10. How do you choose between a photo, an illustration, and an abstract graphic? Choose by the job the visual has to do, not by what style is trendy. A photo suits realism and human connection, the moments when you need the viewer to......
  11. How do you keep a growing component library from becoming bloated? A component library stays lean only through ongoing curation: new components are added against real need, near-duplicates are merged, unused ones are retired, and variants are governed rather than allowed......
  12. How consistent do icons need to be in a set before inconsistency shows? An icon set reads as one family only when its shared visual properties hold across every icon at once: stroke weight, corner style, optical size, and level of detail. Inconsistency......
  13. How do you hand off responsive behavior the mockups don’t capture? You hand off responsive behavior by specifying how the layout adapts across the full range of widths, what reflows, what hides, what scales, what reorders, and at which points, along......

Leave a comment

Your email address will not be published. Required fields are marked *