Empty
Mẫu chuẩnKhối trạng thái rỗng có một việc tiếp theo, không phải một câu trống.
Playground
Đổi brand, theme và ca sử dụng. Ba ca không phải prop của primitive — chúng là ba cách dùng khác nhau, chỉ đổi nội dung chữ và hành động đặt bên trong.
Danh sách chưa có mục nào: bước kế tiếp là tạo mục đầu tiên.
import { Button, Empty, EmptyAction, EmptyDescription, EmptyMedia, EmptyTitle, Icon } from "@nexobox/ui";
import { Layers01Icon } from "@nexobox/ui/icons/Layers01Icon";
<Empty>
<EmptyMedia>
<Icon icon={Layers01Icon} />
</EmptyMedia>
<EmptyTitle>Chưa có đơn hàng nào</EmptyTitle>
<EmptyDescription>Tạo đơn đầu tiên để bắt đầu theo dõi.</EmptyDescription>
<EmptyAction>
<Button>Tạo đơn hàng</Button>
</EmptyAction>
</Empty>Khi nào sử dụng
Nên dùng
Một vùng lẽ ra có nội dung nhưng đang không có, và người dùng cần biết bước kế tiếp: danh sách chưa có mục nào, bộ lọc không khớp mục nào, hoặc hộp thư/hàng đợi đã dọn sạch — ngoại lệ duy nhất, vì không-làm-gì chính là kết quả tốt ở đó.
Tránh dùng
Lỗi tải dữ liệu — người dùng cần biết đã hỏng và cách thử lại, không phải một khối rỗng hiền lành. Trạng thái đang chờ dữ liệu về — đó là Skeleton. Một bảng chỉ thiếu vài hàng — đừng thay cả bảng, giữ tiêu đề cột.
Anatomy
| # | Phần | Ghi chú |
|---|---|---|
| 1 | Empty | Container, xếp dọc, căn giữa theo cả hai chiều. |
| 2 | EmptyMedia | Chỗ đặt một Icon trang trí. Không nền, không khung tròn. |
| 3 | EmptyTitle | Render <p>, không phải heading cố định — khối rỗng xuất hiện ở nhiều độ sâu khác nhau, người gọi tự chọn heading nếu ngữ cảnh cần. |
| 4 | EmptyDescription | Câu giải thích ngắn, giới hạn chiều rộng đọc. |
| 5 | EmptyAction | Chỗ đặt Button. Không tự render Button, không nhận prop label hay onClick. |
Variants & states
Không có variant, không có size. hover / focus / disabled / loading / error: không có — những thứ đó thuộc Button bên trong EmptyAction, hoặc thuộc một component khác (Skeleton cho loading).
Chưa có đơn hàng nào
Tạo đơn đầu tiên để bắt đầu theo dõi.
Bước kế tiếp: tạo mục đầu tiên.
Không tìm thấy kết quả
Không có đơn nào khớp bộ lọc hiện tại.
Bước kế tiếp: xoá bộ lọc, không phải tạo mục mới.
Đã xử lý hết
Hàng đợi không còn việc nào — không cần làm gì thêm.
Ngoại lệ duy nhất: không có EmptyAction, vì không-làm-gì chính là kết quả tốt.
Không có dữ liệu.
Đây là một khiếm khuyết, không phải một cách dùng hợp lệ: một câu trống báo tin xấu rồi bỏ người dùng ở đó, không nói phải làm gì tiếp. Trừ ca "đã dọn sạch", mọi Empty phải có một EmptyAction hoặc một câu giải thích vì sao không cần hành động.
Design tokens
Empty đọc --nf-foundation-space-3, --nf-foundation-space-8, --nf-semantic-text-primary. EmptyMedia đọc --nf-semantic-text-muted. EmptyTitle đọc --nf-semantic-text-primary và --nf-foundation-typography-heading3-*. EmptyDescription đọc --nf-semantic-text-secondary, --nf-foundation-typography-body-*, và giới hạn chiều rộng đọc bằng --nf-foundation-layout-reading. EmptyAction đọc --nf-foundation-space-2. Không có --nf-component-empty-* — đã grep, kết quả 0.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| Empty | — | ComponentPropsWithoutRef<"div">. Mọi thuộc tính div gốc truyền thẳng. |
| EmptyMedia | — | ComponentPropsWithoutRef<"div">. Mọi thuộc tính div gốc truyền thẳng. |
| EmptyTitle | — | ComponentPropsWithoutRef<"p">. Mọi thuộc tính p gốc truyền thẳng. |
| EmptyDescription | — | ComponentPropsWithoutRef<"p">. Mọi thuộc tính p gốc truyền thẳng. |
| EmptyAction | — | ComponentPropsWithoutRef<"div">. Mọi thuộc tính div gốc truyền thẳng. |