Link

Link dẫn người dùng tới trang, tài nguyên hoặc vị trí khác, nằm trong đoạn văn hoặc đứng riêng.

Appearance default dùng màu link brand, subtle dùng foreground-2; cả hai gạch chân khi hover. Link inline (trong câu) luôn gạch chân và kế thừa cỡ chữ. Hỗ trợ disabled, mở trang ngoài (icon + target=_blank) và asChild để bọc link của router.

Xem tất cả tài liệu

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX

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

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Default Subtle Disabled

Appearance & disabled

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

Bằng việc tiếp tục, bạn đồng ý với Điều khoản dịch vụ và Chính sách quyền riêng tưcủa chúng tôi.

Inline trong đoạn văn

inline luôn gạch chân để không chỉ dựa vào màu sắc.

Fluent 2 Design System Đi tới Button

Trang ngoài & asChild

external thêm icon và mở tab mới; asChild giữ style khi bọc phần tử khác.

Cách dùng

Nên

Nhãn mô tả đích đến (“Xem báo cáo quý”), không dùng “Bấm vào đây”.
Dùng inline cho link trong câu để luôn có gạch chân.
Báo trước khi link mở tab mới (external).

Không nên

Không dùng Link cho hành động thay đổi dữ liệu — dùng Button.
Không tô màu brand cho chữ thường để giả làm link.

Props

Prop · Kiểu	Mặc định	Mô tả
appearance"default" \| "subtle"	Mặc định: "default"	Màu brand hoặc neutral.
inlineboolean	Mặc định: false	Trong đoạn văn: luôn gạch chân, kế thừa cỡ chữ.
disabledboolean	Mặc định: —	Bỏ href, aria-disabled, chặn click.
externalboolean	Mặc định: —	Thêm icon mở ngoài, target="_blank", rel="noopener noreferrer".
asChildboolean	Mặc định: —	Áp style lên phần tử con (link của router).
href, target, onClick…AnchorHTMLAttributes	Mặc định: —	Truyền xuống thẻ <a>.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.link

Khoá · Kiểu	Mặc định (tiếng Anh)	messagesVi
newTabstring Chữ ẩn (sr-only) sau link `external`.	Mặc định (tiếng Anh)`"(opens in new tab)"`	messagesVi`"(mở trong thẻ mới)"`