Component / 030 / NEXOFRAME

Badge

Mẫu chuẩn

Nhãn ngắn, không nhấn được. Năm variant trạng thái có viền. Quiet là nền mute, không viền, cho số đếm và nhãn phụ.

Tailwind + Slot5 trạng thái + quietKhông sizeKhông tương tác

Playground

Đổi brand, theme, variant, icon và nhãn để xem cùng một Badge thích ứng.

Đang xử lý

Badge không nhận bấm, không nhận tiêu điểm. Đây là một nhãn hiển thị, không phải một control.

import { Badge } from "@nexobox/ui";

<Badge variant="neutral">
  {/* icon Hugeicons tuỳ chọn qua prop icon */}
  Đang xử lý
</Badge>

Khi nào sử dụng

Nên dùng

Trạng thái của một mục dùng variant có viền. Số đếm và nhãn phụ dùng quiet.

Khi nào không dùng

Tránh dùng

Hành động — dùng Button. Chip xoá được — chưa có primitive. Số đếm dùng quiet, không dùng variant trạng thái. Đừng nhầm với Pill của chrome tài liệu.

Anatomy

#	Phần	Ghi chú
1	Container	Hình viên thuốc. Năm variant trạng thái có viền 1px. `quiet` không viền, nền mute, đệm dọc bằng 0.
2	Icon	Tuỳ chọn, 16px, đứng trước nhãn, cùng màu -icon của variant.
3	Label	Children, kiểu chữ caption. Bắt buộc.

Không có nút đóng. Số đếm là quiet, không phải một phần riêng của primitive.

Variants

NEUTRALNháp

--nf-semantic-status-neutral-*.

SUCCESSHoàn tất

--nf-semantic-status-success-*.

WARNINGCần chú ý

--nf-semantic-status-warning-*.

DANGERLỗi

--nf-semantic-status-danger-*.

INFORMATIONGhi chú

--nf-semantic-status-information-*.

QUIET12

Nền mute, không viền. Số đếm và nhãn phụ.

Mặc định là neutral. Quiet không viền và thấp hơn. Không có size prop.

States

Badge không nhận tương tác: không hover, không focus-visible, không disabled, không cursor-pointer. Chỉ một trạng thái hiển thị — Default, đúng token của variant đang chọn trong Playground.

DEFAULTĐang xử lý

Trạng thái hiển thị duy nhất. Không đổi theo thời gian.

Bàn phím & trợ năng

Badge không nhận tiêu điểm và không có tabindex -- không nằm trong thứ tự Tab.

Tên trợ năng là nội dung văn bản của children, đọc bình thường theo luồng DOM.

Icon đi kèm là trang trí, ẩn khỏi assistive tech qua Icon của @nexobox/ui.

Không truyền đạt trạng thái chỉ bằng màu -- nhãn chữ luôn đi cùng màu variant.

API & triển khai

Prop	Mặc định	Quy ước
variant	neutral	neutral \| success \| warning \| danger \| information \| quiet. Quiet là số đếm và nhãn phụ.
icon	—	Hugeicons icon tuỳ chọn, đứng trước nhãn, 16px.
asChild	false	Radix Slot. Khi bật, children thay toàn bộ nội dung, không tự chèn icon.
children	—	Bắt buộc. Là nhãn nhìn thấy.

Mọi thuộc tính span còn lại được truyền thẳng qua ...props. className được nối, không thay thế.

Design tokens

Năm variant trạng thái đọc --nf-semantic-status-neutral/success/warning/danger/information-background, -border, -foreground, -icon. quiet đọc --nf-semantic-surface-subtle và --nf-semantic-text-muted, không viền, đệm dọc bằng 0. Icon dùng --nf-foundation-size-icon-small. Kiểu chữ dùng --nf-foundation-typography-caption-* (ngoại lệ bind foundation được phép, DS-015 clause 8b). Bo góc dùng --nf-component-badge-radius, alias của foundation.radius.pill. Đệm trạng thái dùng --nf-component-badge-padding-inline, -padding-block, -gap.

Do / Don't

Nên dùng

variant="danger" cho một trạng thái lỗi đã xảy ra. quiet cho số đếm và nhãn phụ. Hai loại được đặt cạnh nhau: trạng thái một bên, số một bên.

Tránh dùng

Dùng variant trạng thái cho một con số. Dùng danger chỉ để nhấn mạnh thị giác. Bọc Badge trong onClick để giả làm nút.