Empty

نصب

pnpm dlx @simurgh-ui/cli add empty

import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from '@simurgh-ui/react/empty';
import '@simurgh-ui/styles/empty.css';

Vue و Angular partهای متناظر را از subpath empty صادر می‌کنند.

پیش‌نمایش واقعی

Live component Empty ◆

+

No projects yet

Create a project to organize your work.

Create project

استفاده

<Empty>
  <EmptyMedia aria-hidden="true">+</EmptyMedia>
  <EmptyHeader>
    <EmptyTitle>هنوز پروژه‌ای وجود ندارد</EmptyTitle>
    <EmptyDescription>
      برای سازمان‌دهی کار خود یک پروژه بسازید.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>ساخت پروژه</Button>
  </EmptyContent>
</Empty>

محتوا و دسترس‌پذیری

Title وضعیت را نام‌گذاری، Description دلیل یا راه بعدی را توضیح و Content action اصلی را نگهداری می‌کند. Media تزئینی باید از accessibility tree پنهان باشد. بیش از یک action اصلی یا متن طولانی، empty state را مبهم می‌کند.

اگر Empty پس از یک تغییر async ظاهر می‌شود، status announcement را فقط یک بار و با پیام کوتاه فعال کنید. برای loading از Skeleton یا Spinner و برای failure از Alert استفاده کنید.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.