Component / 045 / NEXOFRAME

StatusDot

Mẫu chuẩn

Một chấm tròn nhỏ báo trạng thái, luôn đi kèm nhãn chữ. Màu không bao giờ tự mang nghĩa (WCAG 1.4.1). Năm variant, lấy màu từ token status-*-icon, vì chấm đóng vai một icon.

Không Radix5 variantNhãn bắt buộcKhông animation

Playground

Đổi brand, theme, variant, nhãn và việc giấu nhãn để xem cùng một StatusDot thích ứng.

Đang làm việc

Nhãn chữ luôn hiện cạnh chấm. active và done dùng cùng một màu — nhãn là thứ phân biệt chúng.

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

<StatusDot variant="active">
  Đang làm việc
</StatusDot>

Khi nào sử dụng

Nên dùng

Báo trạng thái sống của một đối tượng cạnh tên của nó: nhân sự đang làm việc hay tạm dừng, một hoạt động đã xong, còn là bản nháp hay cần chú ý.

Khi nào không dùng

Tránh dùng

Không dùng cho	Dùng thay
Trạng thái cần nổi bật hoặc đứng một mình	Badge
Số đếm	Badge hoặc chữ
Tiến độ	Progress
Chỉ báo đang tải	Trạng thái `loading` của Button, hoặc Skeleton

Anatomy

Một <span> chứa chấm tròn (kích thước size.icon-small chia hai, bo radius.pill) và nhãn chữ theo sau. Khi người gọi đặt labelHidden, nhãn vẫn còn trong DOM dưới dạng sr-only, không bị bỏ.

Variants

ACTIVEĐang làm việc

Đang hoạt động, đang làm việc.

INACTIVETạm dừng

Tạm dừng, ngoại tuyến.

DONEĐã xác nhận

Đã xong, đã xác nhận.

DRAFTBản nháp

Bản nháp, đang chờ.

WARNINGThiếu kết nối

Cần chú ý: thiếu kết nối, cần duyệt.

active và done dùng cùng một màu. Chúng khác nhau ở nhãn chữ, và đó chính là lý do nhãn là bắt buộc.

States

Một trạng thái hiển thị. Không nhận tương tác. Đổi trạng thái bằng cách đổi variant. Không có animation: một chấm nhấp nháy không mang thêm thông tin và phải tắt dưới prefers-reduced-motion.

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

Không nhận tiêu điểm.

Chấm có aria-hidden="true"; tên trợ năng là nhãn chữ.

API & triển khai

Prop	Mặc định	Quy ước
variant	—	"active" \| "inactive" \| "done" \| "draft" \| "warning". Bắt buộc.
children	—	Bắt buộc. Nhãn chữ.
labelHidden	false	Giấu nhãn khỏi mắt, giữ cho trình đọc màn hình.

Mọi thuộc tính <span> còn lại được truyền thẳng. className được nối.

Design tokens

--nf-semantic-status-success-icon, --nf-semantic-status-information-icon, --nf-semantic-status-warning-icon, --nf-semantic-text-muted, --nf-foundation-size-icon-small, --nf-foundation-radius-pill, --nf-foundation-space-2 (khoảng chấm–nhãn), --nf-foundation-typography-caption-*.

Do / Don't

Nên dùng

<StatusDot variant="warning">Thiếu kết nối</StatusDot>. labelHidden khi nhãn đã đọc được ở ngay cạnh. Chọn variant theo nghĩa.

Tránh dùng

Một chấm vàng không có chữ. aria-label trên chấm kèm một nhãn nhìn thấy khác nghĩa. Chọn variant theo màu cho hợp bố cục.