Tag

Tag biểu diễn một thuộc tính, bộ lọc hoặc đối tượng đã chọn; có thể gỡ bỏ hoặc tương tác.

Tag tĩnh chỉ hiển thị; Tag dismissible là một nút — bấm, Delete hoặc Backspace để gỡ. InteractionTag tách hành động chính và nút X riêng. TagGroup xếp các tag, điều hướng bằng phím mũi tên và tự chuyển focus sang tag kế bên khi một tag bị gỡ.

Thiết kếSự kiệnNguyễn Văn AnMới

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 { Tag, InteractionTag, TagGroup } 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.

FilledOutlineBrand

Appearance

filled (mặc định), outline, brand.

MediumSmallExtra smallCircular

Kích thước & shape

medium (32px), small (24px), extra-small (20px); rounded hoặc circular.

Trần Thị BìnhLê Hoàng CườngKỹ sư phần mềm

Avatar & secondaryText

media đặt Avatar sát mép; secondaryText thêm dòng phụ (size medium).

Dismissible trong TagGroup

Bấm tag hoặc nhấn Delete/Backspace để gỡ; focus tự sang tag kế bên.

InteractionTag

Hành động chính và nút X là hai điểm focus riêng.

Cách dùng

Nên

Giữ nhãn tag ngắn (1–3 từ); nhãn dài sẽ bị cắt bằng dấu …
Dùng TagGroup để tag xuống dòng gọn gàng và có điều hướng bàn phím.
Dùng appearance brand tiết kiệm — chỉ cho tag cần nhấn mạnh.

Không nên

Không dùng Tag thay Button cho hành động chính của trang.
Không dùng Tag để báo trạng thái (thành công, lỗi) — dùng Badge.
Không trộn nhiều appearance trong cùng một nhóm khi không có ý nghĩa.

Props

Prop · Kiểu	Mặc định	Mô tả
appearance"filled" \| "outline" \| "brand"	Mặc định: "filled"	Kiểu tag.
size"extra-small" \| "small" \| "medium"	Mặc định: "medium"	Chiều cao 20 / 24 / 32px.
shape"rounded" \| "circular"	Mặc định: "rounded"	Bo góc.
icon / mediaReactNode	Mặc định: —	Icon hoặc Avatar trước nhãn.
secondaryTextReactNode	Mặc định: —	Dòng phụ dưới nhãn.
dismissible / onDismissboolean / (event, value) => void	Mặc định: —	Biến tag thành nút gỡ.
valuestring	Mặc định: —	Định danh — TagGroup.onDismiss nhận giá trị này.
TagGroup.onDismiss(value: string) => void	Mặc định: —	Gỡ tag trong nhóm, tự quản lý focus.
TagGroup.size / appearance / disabled—	Mặc định: —	Mặc định cho mọi tag con.

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.tag

Khoá · Kiểu	Mặc định (tiếng Anh)	messagesVi
dismissstring Mô tả hành động gỡ (Tag dismissible) và nhãn nút X khi nhãn tag không phải chuỗi.	Mặc định (tiếng Anh)`"Remove"`	messagesVi`"Gỡ"`
dismissNamed(name: string) => string Nhãn nút X của InteractionTag khi nhãn tag là chuỗi.	Mặc định (tiếng Anh)(name) => `Remove ${name}`	messagesVi(name) => `Gỡ ${name}`