The Difference Between a Button and a Link

July 28, 2026

Of the 3 proposals successful the Triptych Project, my multi-year odyssey to adhd a fewer small-but-powerful features to HTML, the 1 that generates the astir questions is Button Actions. The connection itself is very straightforward: we want to adhd the action and method attributes to the button.

Button Actions are specified a elemental primitive that group often inquire why they’re needed. The reply rests connected a favoritism that web users intuitively understand but seldom person to deliberation astir directly: the quality betwixt a fastener and a link.

I added a elaborate “Buttons vs Links” conception to the proposal, but I deliberation it deserves a blog-style mentation arsenic well, because astir of the existing ones miss the mark.

Buttons person a fixed context

Links correspond a destination while buttons correspond an action. Functionally, this intends that links fto users power what discourse they unfastened in, while buttons don’t.

Web browsers connection countless affordances for re-contextualizing a link. Clicking aliases tapping the nexus will navigate the existent page to that destination. Mouse users tin middle-click the nexus to unfastened it successful a caller tab aliases hover complete the nexus to spot wherever it goes. Context menus (right-click connected desktop, agelong pat connected mobile) person tons of link-specific options.

Web users are very acquainted pinch the features that travel pinch links. They cognize really to unfastened them, transcript them, bookmark them, stock them pinch friends, and support them successful an inadvisable number of browser tabs.

The semantics of a link—the conception that they correspond an independently-navigable destination—make it imaginable for browsers to build each these features. The hyperlink predates the invention of the browser tab, but erstwhile browsers added tabs, websites didn’t person to do thing to support them; links represented destinations that could beryllium re-contextualized, truthful browsers could simply invent a caller discourse for them to unfastened in. Every website instantly sewage upgraded pinch a immense caller feature.

Buttons person nary of these features. By default, they cannot beryllium middle-clicked, control-clicked, aliases hovered complete for much information. Buttons don’t let you to transcript their action the measurement you tin transcript the href of a link. Their discourse menus incorporate nary affordances for redeeming the action aliases doing it location else.

These are not omissions, but deliberate choices based connected the button’s semantics: buttons trigger actions wrong a circumstantial browsing discourse (almost ever the existent one). Copying, sharing, bookmarking—these are each features for re-contextualizing the action of a link. Buttons service a complimentary intent because they don’t let for immoderate of that.

When should buttons navigate?

A communal misconception is that links are for navigating the page, while buttons are for everything else. This is incorrect connected some counts.

Buttons regularly execute navigations. Clicking a logout fastener navigates the existent page to a logged-out one; clicking a “search” fastener navigates the existent page to the query results.

And links are often utilized successful situations wherever they don’t trigger navigations. Relative links tin jump astir the existent page; mailto links tin unfastened email clients; download links tin prevention a record to your computer. None of these are navigations, but they are each “destinations” that tin beryllium opened, saved, and shared successful customizable ways.

Navigations should beryllium represented arsenic buttons erstwhile their action happens successful a fixed discourse that is not disposable to beryllium re-contextualized (e.g. bookmarked, shared, middle-clicked, etc.). A predominant spot this comes up is pinch forms that fto you edit thing you’ve already saved, for illustration a remark connected a website. When you click “Edit”, the website shows you an editable matter area pinch options for illustration this:

Users will easy intuit what each fastener does:

• “Save” updates the remark pinch immoderate is successful the <textarea>
• “Save Draft” saves the contented of the <textarea> without publishing it
• “Cancel” closes the editable form
• “Delete” removes the remark entirely

Should “Cancel” beryllium a link? No! Its occupation is to adjacent the edit view. Not only does making this a nexus incorrectly pass its purpose—visually and otherwise—but it saddles the shape “control” pinch tons of features, for illustration bookmarking and middle-clicking, that person incorrect behavior.

There are galore plausible ways these buttons could beryllium implemented, but nary of those implementations should coming themselves to the personification arsenic a link.

What spread do Button Actions fill?

With Button Actions, this full UX could beryllium implemented pinch conscionable HTML.

The first 2 buttons usage existing HTML features, the 2nd 2 buttons are made imaginable by Button Actions. (I’m besides taking advantage of Triptych’s DELETE support, but you could do the URL method hack without it.)

Philosophically, Button Actions create a generic power that tin redraw the existent discourse pinch a web request. Buttons already person the expertise to do this pinch definite limitations; this connection removes those limitations.

Practically, this allows web authors to instrumentality authorities transitions by navigating to views. Those views mightiness moreover already beryllium arsenic standalone destinations, successful which lawsuit authors tin trivially re-use existing routes while representing the action correctly successful the UI. This is simply a awesome shape that HTML should encourage!

Unfortunately, without Button Actions, erroneously making this fastener a nexus is the only measurement that we person to instrumentality this interface without scripting.

This is evidently an anti-pattern, but it’s an anti-pattern supported by awesome creation systems, because buttons deficiency the expertise to do basal navigation without forms. When building a website that useful without JavaScript (a request for UK authorities sites), links are the only choice. The US Web Design System (USWDS) moreover contains an charismatic affordance for it: Add class="usa-button" to a nexus and it will look for illustration a button.

Making a nexus look for illustration a button, however, does not make the nexus behave for illustration a button. USWDS uses JavaScript to instrumentality spacebar activation, but JavaScript can’t do thing astir the litany of different behaviors that differentiate buttons from links, for illustration discourse menus. Links (even those pinch role=button) will still look for illustration links successful scholar mode aliases different civilization views. That’s the basal consequence of violating HTML semantics—the page will beryllium surgery for immoderate users because authors cannot perchance relationship for each the different ways that group interact pinch a web page. The web simply wouldn’t activity if they had to.

Navigations are the broadest instrumentality that web authors person to power the personification experience—HTML conscionable needs to complete the <button>’s expertise to trigger them. Doing truthful makes the web simpler, safer, and much accessible for all.

If you’d for illustration to support the effort, the champion measurement is to for illustration the Button Actions rumor connected GitHub and stock examples of why the connection would beryllium valuable to you.

• Big shoutout to The Django Software Foundation for their support of this proposal!
• I americium presently moving connected an study to show that Button Actions do not present immoderate caller XSS vulnerabilities to existing web sites. Supporting this connection doesn’t resoluteness that issue, but it does show to WHATWG that web authors person this request and that it’s worthy studying.
• This blog focuses connected buttons that trigger GET requests without forms, because that’s wherever the overlap pinch links is, but buttons that trigger unsafe requests without forms are besides very useful. DELETE requests are astir apt the astir communal use-case, because they usually don’t require immoderate further data.
• One absorbing lawsuit for buttons that trigger POST aliases PUT requests without a shape is “likes” connected societal sites. HackerNews, for instance, uses links for upvotes, which is successful chaotic usurpation of HTTP semantics. I understand why they do it though: it’s simpler and useful without JavaScript. That’s why it’s basal to make Button Actions not conscionable possible, but convenient.
• The connection addresses each the existing workarounds for the deficiency of this functionality and explains why they’re not sufficient.
• The large image extremity pinch Triptych to is to springiness web authors a elemental and semantic measurement to exemplary a afloat CRUD lifecycle successful HTML, because that’s each the immense mostly of web services request to do.
• All the Triptych Proposals complement each other—Button Actions are moreover much useful pinch additional methods and partial page replacement—but I effort to make the lawsuit for each 1 successful isolation, some arsenic an anti-logrolling system and because they are genuinely useful connected their own.