Yugen UI

Empty

Empty hiển thị trạng thái trống khi chưa có dữ liệu, kèm lời giải thích và hành động tiếp theo.

Ghép từ EmptyHeader, EmptyMedia (icon trong ô 48px hoặc Avatar), EmptyTitle, EmptyDescription và EmptyContent chứa hành động. Bản outline có viền nét đứt, hợp với vùng nội dung trống trong trang hoặc vùng thả tệp.

Chưa có dự án nào

Bạn chưa tạo dự án nào. Hãy bắt đầu bằng dự án đầu tiên hoặc nhập từ tệp có sẵn.

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 {  Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,} 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.

Không tìm thấy kết quả

Thử từ khoá khác hoặc bỏ bớt bộ lọc đang áp dụng.

Không có kết quả

Biến thể default (không viền) trong trang tìm kiếm.

An đang ngoại tuyến

Để lại lời nhắn, bạn ấy sẽ thấy khi quay lại.

Với Avatar

EmptyMedia variant="default" để đặt Avatar hoặc ảnh minh hoạ.

Cách dùng

Nên
  • Giải thích vì sao trống và người dùng nên làm gì tiếp theo.
  • Đưa ra tối đa 1 hành động chính (primary) và 1 hành động phụ.
  • Dùng icon gợi đúng ngữ cảnh (thư mục, tìm kiếm, hộp thư…).
Không nên
  • Không chỉ ghi “Không có dữ liệu” mà không có hướng dẫn.
  • Không dùng màu brand hay gradient lớn cho ô icon.
  • Không dùng Empty cho lỗi tải — dùng MessageBar intent error.

Props

Prop · KiểuMặc địnhMô tả
Empty.variant"default" | "outline"Mặc định: "default"outline: viền nét đứt stroke-1, bo 12px.
EmptyMedia.variant"icon" | "default"Mặc định: "icon"icon: ô 48px nền background-4; default: giữ nguyên (Avatar, ảnh).
EmptyTitleReactNodeMặc định: —Tiêu đề subtitle1 semibold.
EmptyDescriptionReactNodeMặc định: —Mô tả body1 foreground-3; link bên trong tự tô màu link.
EmptyContentReactNodeMặc định: —Vùng hành động (Button, Link).