Skip to main content
Frontend Glossary

UI components · Fundamentals

Link

Also called: Hyperlink, Text link, Anchor tag, a tag

Clickable text that takes you to another page, a spot on the same page, or an external URL. Usually colored or underlined.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Make the "Order ID" column in the table a link that goes to the matching order detail page. Use an a tag with an href, not a button with a click handler. Style links as dark gray text with an underline on hover. External links should open in a new tab, with a small external-link arrow icon after the text.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Link is what you need.

Use Link when

  • Going to another page on the site, like from a list to a detail page
  • Referencing other articles, docs, or external websites in body text
  • Low-key secondary entry points like "Forgot password," "View all," or "Terms of Service"

Pick something else when

  • When clicking submits, deletes, or saves data

    Use insteadButton

  • When clicking only opens a dialog or drawer without changing the page URL

  • The most important action on the page, which needs a prominent button style to draw clicks

    Use insteadButton

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Using a button with a click handler for navigation, so users can't open it in a new tab or copy the link

  2. 02

    Using an a tag with no href and only a click handler, so it can't get keyboard focus

  3. 03

    Links in the same color as regular text with no underline, so users can't tell what's clickable

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A piece of clickable text set apart from regular text by color or underline. External links often have a small arrow icon after them.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

Links "go somewhere": another page on the site, a section of the current page, an external website, or a file download. In HTML it's an <a> tag with an href, and the browser automatically supports right-click to open in a new tab, copy link address, Ctrl-click, and so on.

The difference from a Button: links navigate, buttons perform actions. Each can be styled to look like the other, but don't mix up the semantics. If it goes to a page, use a link. If it submits data or opens a popup, use a button. Something with only an icon and no text that performs an action is an Icon Button.

Links often show up in body text, table cells, footers, and secondary entry points like "View all" or "Forgot password." Links to external sites usually open in a new tab, with a small arrow icon as a hint.

Developer info
Term ID
component-link
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • a[href]:not([role="button"]):not(.btn):not(.ant-btn):not([class*="Button-root"])
  • [role="link"]
  • a.ant-typography
  • .el-link
  • [class*="MuiLink-root"]
  • .arco-link
  • .t-link
  • .n-a
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026