Design System Core Component

app/components/ui/empty-state

Empty State

Thành phần thông báo trực quan khi một danh sách, bảng dữ liệu hoặc vùng giao diện chưa có phần tử. Hỗ trợ cả Props tiện lợi cho trường hợp sử dụng nhanh và Compound Component để tùy biến bố cục sâu.

4 Variants: default, card, dashed, ghost3 Kích cỡ: sm, md, lg5 Presets Vector DuotoneHỗ trợ Dark Mode & Tailwind v4

Bộ công cụ trải nghiệm trực tiếp (Live Playground)

Thay đổi biến thể, kích cỡ, preset và kiểu icon để kiểm tra tương tác thực tế.

Tùy chọn cấu hình

Biến thể (variant):

Kích cỡ (size):

Minh họa Preset:

Kiểu huy hiệu icon (iconStyle):

Bao gồm nút hành động CTA

Không tìm thấy kết quả phù hợp

Không có kết quả nào khớp với từ khóa tìm kiếm của bạn. Hãy thử từ khóa khác hoặc xóa bộ lọc.

Bộ minh họa Vector Presets có sẵn

Được vẽ bằng SVG vector duotone tối ưu, phản hồi sắc nét và hài hòa màu sắc trên cả nền sáng và tối.

Chưa có dữ liệu

Hệ thống chưa ghi nhận bản ghi nào trong chế độ xem này.

preset="no-data"

Không có kết quả

Không tìm thấy bản ghi nào khớp với điều kiện lọc.

preset="search"

Thư mục trống

Kéo thả tập tin vào đây hoặc bấm tải lên.

preset="folder"

Không có thông báo

Mọi công việc và thông báo đã được giải quyết xong.

preset="inbox"

Lỗi tải dữ liệu

Không thể nạp thông tin từ máy chủ lúc này.

preset="error"

Compound Component API

Tùy biến trọn vẹn icon, typography và danh sách nút bấm theo nhu cầu riêng.

EmptyState.* Compound Pattern

Hướng dẫn mã nguồn sử dụng

Hai cách tiếp cận linh hoạt tùy theo độ phức tạp của trang.

1. Phong cách Props nhanh gọn (Props API)

Phù hợp 90% các tình huống thông thường.

import { EmptyState } from '~/components/ui/empty-state';
import { Button } from '~/components/ui/button';

<EmptyState
  variant="dashed"
  size="md"
  preset="search"
  title="Không tìm thấy bài viết"
  description="Thử tìm với từ khóa khác hoặc xóa lọc."
  action={<Button onClick={clearFilter}>Xóa lọc</Button>}
/>

2. Phong cách Ghép nối (Compound Component API)

Dành cho bố cục tùy biến sâu, chèn form hoặc nhiều nút.

import {
  EmptyState,
  EmptyStateIcon,
  EmptyStateTitle,
  EmptyStateDescription,
  EmptyStateActions
} from '~/components/ui/empty-state';

<EmptyState variant="card" size="lg">
  <EmptyStateIcon iconStyle="glow">
    <CustomIcon />
  </EmptyStateIcon>
  <EmptyStateTitle>Bộ sưu tập chưa có media</EmptyStateTitle>
  <EmptyStateDescription>
    Tải lên ảnh đầu tiên để tạo album.
  </EmptyStateDescription>
  <EmptyStateActions>
    <Button variant="primary">Tải lên</Button>
  </EmptyStateActions>
</EmptyState>

Notifications