Button or Link?

Buttons do things. Links take you places. A tiny classroom for designers and developers who want to stop arguing with HTML.

The rule

Use a link when the user goes somewhere

<a href="…" >

Use links for navigation to pages, sections, files, email addresses, phone numbers or other resources.

Use a button when the user does something

<button type="button">

Use buttons for actions that change, submit, open, close, reveal, save, delete or otherwise affect the current interface.

Style is not semantics

Choose the HTML element based on what happens when the user activates it. Then style it to match the design.

Button styled like a link

Looks like a link. Still a button.

Use a <button> when the control reveals content, opens a modal, toggles state or changes the current interface.

<button type="button" class="link-style">
  Show details
</button>

Link styled like a button

View examples

Looks like a button. Still a link.

Use an <a href> when the control takes the user to another page, section, file or resource.

<a class="button-style" href="/pricing">
  View pricing
</a>

Pop quiz: what should it be?

Answer the question based on what the control actually does, not how it looks in the design.

Common components: button or link?

Code examples

Navigation: use a link

<a href="/pricing">Pricing</a>

Action: use a button

<button type="button" aria-haspopup="menu" aria-expanded="false">Open menu</button>

Avoid: link that behaves like a button

<a href="#" onclick="saveSettings()">Save settings</a>

Avoid: button that behaves like a link

<button type="button" onclick="location.href='/pricing'">Pricing</button>

Accessibility notes

A button and a link are not just visual styles. They expose different roles to assistive technologies and have different expected keyboard behaviour.

Important: This page is designed to support WCAG 2.2 AAA and EN 301 549-aligned implementation, but compliance still requires testing in the final production context, including content, design, browser behaviour and assistive technology support.

Release checks

These checks are included as reminders because they are easy to break when the visual design changes.

Further reading

Five solid references for the next lesson.