Link
The control that navigates somewhere — distinct from a button, which performs an action, and confused with one in most products.
UI ComponentsA link navigates; a button acts. That distinction is not pedantry, because the browser attaches real behaviour to each. A link can be opened in a new tab, copied, bookmarked, middle-clicked and crawled. A button cannot. Rendering navigation as a `<button>` with a click handler removes all of that, and styling an action as a link invites people to open “Delete” in a new tab.
The visible text has to work alone. Screen-reader users commonly list links out of context, where “click here” ten times over is useless; “Download the 2026 pricing sheet” is a destination. Underlining links in body text is not a stylistic preference either — colour alone fails for colour-blind readers, and it is the one place where the convention genuinely earns its keep.
In practice
A documentation site rendered in-page navigation as buttons for styling consistency. Users could not open sections in new tabs, and crawlers followed none of them, so deep pages stayed unindexed for months. Converting them to real anchors with the same styling fixed both in one deploy.
Where teams get it wrong
- Navigation built as buttons, which kills new-tab, bookmarking and crawling.
- Actions styled as links, inviting people to open them in a tab.
- “Click here” and “Read more” repeated down a page.
- Links distinguished from body text by colour alone.
- New tabs opened without warning, taking away the back button.
Learn more
You may ask
Frequently Asked Questions
When should you use a link instead of a button?
Use a link when the result is a new location — another page, a section, a file. Use a button when it performs an action on the current page. If a user could reasonably want it in a new tab, it should be a link.
Should links be underlined?
In body text, yes. Colour alone is not distinguishable for colour-blind readers. In navigation and other obviously interactive regions, position and context carry the signal and underlines are optional.
Related terms
All terms- Button DesignDesigning the appearance, hierarchy, states and labels of buttons so people can tell what is clickable and which action matters most.
- BreadcrumbA trail showing where the current page sits in a hierarchy, and a way back up it.
- NavbarThe persistent top bar carrying a product's primary destinations, identity and account controls.
- UI DesignThe design of what a user sees and operates — layout, type, colour, iconography and the visual states of every control.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us