Yugen UI

CounterBadge

CounterBadge hiển thị số lượng (thông báo, tin chưa đọc) hoặc một chấm báo có mục mới.

Ẩn khi count = 0 (trừ khi showZero); vượt overflowCount thì hiện "99+". Chế độ dot luôn hiện chấm tròn. Số hiển thị được ẩn với trình đọc màn hình và thay bằng nhãn thân thiện như "5 thông báo" (đổi bằng prop label).
5 thông báoHơn 99 thông báo0 thông báoCó thông báo mớ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 { CounterBadge } 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.

5 thông báo5 thông báo5 thông báo5 thông báo5 thông báo5 thông báo

Appearance & màu

filled (mặc định) / ghost × brand, danger, important, informative.

8 thông báo8 thông báo8 thông báo8 thông báo8 thông báo

Kích thước & hình dạng

small, medium, large, extra-large; shape circular (mặc định) hoặc rounded.

Hơn 99 thông báoHơn 999 thông báo0 thông báoCó thông báo mới

Tràn số, số 0 & chấm

overflowCount mặc định 99; showZero để vẫn hiện số 0; dot chỉ là chấm.

3 thông báo

Gắn lên nút icon

Đặt badge tuyệt đối ở góc trên-cuối (logical: -inset-e-1) để tự đảo trong RTL.

Cách dùng

Nên
  • Dùng danger cho việc cần xử lý gấp, brand cho số đếm thông thường.
  • Đặt overflowCount phù hợp để badge không phình to.
  • Kèm nhãn đọc rõ nghĩa (label) khi đơn vị không phải "thông báo".
Không nên
  • Không dùng CounterBadge cho nhãn chữ — dùng Badge.
  • Không hiện số 0 trừ khi số 0 mang thông tin.

Props

Prop · KiểuMặc địnhMô tả
countnumberMặc định: 0Số đếm.
overflowCountnumberMặc định: 99Vượt ngưỡng hiển thị "N+".
showZerobooleanMặc định: falseVẫn hiện khi count = 0.
dotbooleanMặc định: falseChỉ hiện chấm tròn (luôn hiện).
appearance"filled" | "ghost"Mặc định: "filled"Nền đặc hoặc chỉ chữ.
color"brand" | "danger" | "important" | "informative"Mặc định: "brand"important = nền đảo (foreground-1).
shape"circular" | "rounded"Mặc định: "circular"Hình dạng.
size"small" | "medium" | "large" | "extra-large"Mặc định: "medium"Như Badge.
labelstringMặc định: —Nhãn cho trình đọc màn hình; mặc định "{count} thông báo".

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

Khoá · KiểuMặc định (tiếng Anh)messagesVi
dotstring

Nhãn cho trình đọc màn hình khi dot.

Mặc định (tiếng Anh)"New notifications"messagesVi"Có thông báo mới"
count(count: number) => string

Nhãn cho trình đọc màn hình theo số đếm.

Mặc định (tiếng Anh)(count) => (count === 1 ? "1 notification" : `${count} notifications`)messagesVi(count) => `${count} thông báo`
overflow(overflowCount: number) => string

Nhãn cho trình đọc màn hình khi count vượt overflowCount.

Mặc định (tiếng Anh)(overflowCount) => `More than ${overflowCount} notifications`messagesVi(overflowCount) => `Hơn ${overflowCount} thông báo`