Skip to content
UIGrammer
EN 中文

Component · Actions · 03

Link

Link = inline text that navigates, underlines on hover, and marks external targets.

Skip to the modify prompt →

Read the component spec before you ship the change.

See all componentsChangelog ↗Earlier draft

What is a Link?

A link promises a destination. Name the underline behavior, the visited state, and how external targets are marked.

Variants

Tap a property to highlight it in the preview.

Name this type explicitly in the prompt.
Name this type explicitly in the prompt.
Name this type explicitly in the prompt.
Tabs marked by a line under the active item.
Give a value, not a vibe word.
Give a value, not a vibe word.
Give a value, not a vibe word.
A control that cannot be interacted with; show it dimmed and non-focusable.

States

Tap a property to highlight it in the preview.

The resting, valid state of a field before any input or error.
How the control reacts on pointer-over: lift, tint, or border change. Name it so the model does not guess.
Say this state explicitly in the prompt.
The keyboard-focused state — a visible ring or border change. Never remove it.
A control that cannot be interacted with; show it dimmed and non-focusable.

Anatomy

These are the parts to name in your prompt.

  • 01 Text
  • 02 Underline
  • 03 External marker

When to use

  • Inline references inside a paragraph of body copy
  • Standalone navigation links in footers and meta rows
  • Links that open a new tab — marked, never silent

Avoid when

  • The action changes state instead of location — use a Button
  • The link text says “click here”
  • Opening a new tab without an external marker

If the link leaves the site, say so in the markup — a silent new tab is the most reported link bug there is.

See also

Styles
Minimal→Editorial→
Themes
Personal Blog→Personal Portfolio→
Components
Button→Breadcrumb→
Anti-patterns
Removed Focus Ring→
Create a link component. STYLE - #0071E3 text, inherits the surrounding font size - underline appears on hover, 1px, offset 2px - visited links settle to #7B4BE0 - external links carry a 12px arrow marker after the text STATES - default, hover, visited, focus-visible 2px ring, disabled #C7C7CC TECHNICAL - React - Tailwind CSS - shadcn/ui