Yugen UI

Badge

Badge là chỉ báo trực quan truyền đạt một thông tin nhỏ: trạng thái, số lượng hoặc nhãn phân loại.

Badge không tương tác. Chọn màu theo ý nghĩa ngữ nghĩa (danger, success, warning…) chứ không vì thẩm mỹ.
MớiĐang hoạt động12

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 { Badge } 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.

FilledTintOutlineGhost

Appearance

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

BrandDangerThành côngWarningInformativeSubtle

Màu ngữ nghĩa

brand, danger, success, warning, informative, subtle.

Đã duyệtChờ xử lýBị từ chốiNháp

Tint theo trạng thái

Ít tương phản hơn filled — phù hợp cho bảng/danh sách dày đặc.

51299+Nổi bật

Kích thước & shape

small → extra-large; circular (mặc định), rounded, square.

Cách dùng

Nên
  • Giữ nội dung Badge cực ngắn (1–2 từ hoặc một số).
  • Đặt Badge cạnh đối tượng mà nó mô tả.
Không nên
  • Không dùng Badge làm nút bấm.
  • Không dùng màu danger/success chỉ để trang trí.

Props

Prop · KiểuMặc địnhMô tả
appearance"filled" | "tint" | "outline" | "ghost"Mặc định: "filled"Kiểu hiển thị.
color"brand" | "danger" | "success" | "warning" | "informative" | "subtle"Mặc định: "brand"Màu ngữ nghĩa.
size"small" | "medium" | "large" | "extra-large"Mặc định: "medium"Chiều cao 16 / 20 / 24 / 32px.
shape"circular" | "rounded" | "square"Mặc định: "circular"Bo góc.
iconReactNodeMặc định: —Icon đặt trước nội dung.