Link

Link takes people to another page, resource or location, inline in a paragraph or on its own.

The default appearance uses the brand link color and subtle uses foreground-2; both underline on hover. An inline link (inside a sentence) is always underlined and inherits the font size. Supports disabled, external pages (icon + target=_blank) and asChild to wrap a router link.

View all documents

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { Link } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Default Subtle Disabled

Appearance & disabled

default (brand), subtle (neutral), disabled.

By continuing, you agree to our Terms of Service and Privacy Policy.

Inline in a paragraph

inline is always underlined so the link doesn't rely on color alone.

Fluent 2 Design System Go to Button

External page & asChild

external adds an icon and opens a new tab; asChild keeps the styles when wrapping another element.

Usage

The label describes the destination (“View the quarterly report”), not “Click here”.
Use inline for links inside a sentence so they are always underlined.
Tell people when a link opens a new tab (external).

Don't

Don't use Link for actions that change data. Use Button.
Don't color plain text brand to make it look like a link.

Props

Prop · Type	Default	Description
appearance"default" \| "subtle"	Default: "default"	Brand or neutral color.
inlineboolean	Default: false	Inside a paragraph: always underlined, inherits the font size.
disabledboolean	Default: —	Removes href, sets aria-disabled and blocks clicks.
externalboolean	Default: —	Adds an external-link icon, target="_blank" and rel="noopener noreferrer".
asChildboolean	Default: —	Applies the styles to the child element (a router link).
href, target, onClick…AnchorHTMLAttributes	Default: —	Passed to the <a> element.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.link

Key · Type	Default (English)	messagesVi
newTabstring Chữ ẩn (sr-only) sau link `external`.	Default (English)`"(opens in new tab)"`	messagesVi`"(mở trong thẻ mới)"`