@fvc/empty

@fvc/empty provides a FE-VIS empty state primitive on top of Ant Design Empty. It exposes the full Ant Design Empty API with a consistent CSS prefix and testId support, and re-exports the preset image constants for use in consuming applications.

Installation

bun add @fvc/empty

Peer Dependencies

bun add react antd

Import

import { Empty } from '@fvc/empty';

Quick Start

import { Empty } from '@fvc/empty';

export function NoResults() {
  return <Empty description="No records found" />;
}

Common Usage

Default Empty State

<Empty />

Custom Description

<Empty description="No data available for the selected period" />

Simple Image

<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="Nothing here" />

With Action

<Empty description="No records found">
  <Button type="primary" onClick={handleCreate}>
    Create record
  </Button>
</Empty>

No Description

<Empty description={false} />

Custom Image

<Empty
  image="https://example.com/custom-empty.svg"
  imageStyle={{ height: 80 }}
  description="No results"
/>

Props

| Prop | Type | Description | | --- | --- | --- | | testId | string | Maps to data-testid. | | All EmptyProps | — | All Ant Design Empty props (description, image, imageStyle, children, etc.). |

Static Properties

| Property | Description | | --- | --- | | Empty.PRESENTED_IMAGE_DEFAULT | Default Ant Design empty illustration. | | Empty.PRESENTED_IMAGE_SIMPLE | Simplified Ant Design empty illustration. |

Consumer Example

import { Empty } from '@fvc/empty';
import { Button } from '@fvc/button';

export function EmptyTable({ onAdd }: { onAdd: () => void }) {
  return (
    <Empty
      image={Empty.PRESENTED_IMAGE_SIMPLE}
      description="No records found"
      testId="table-empty-state"
    >
      <Button type="primary" onClick={onAdd}>
        Add record
      </Button>
    </Empty>
  );
}

Testing

<Empty description="No data" testId="empty-state" />

screen.getByTestId('empty-state');

Development

bun run lint
bun run type-check
bun run test
bun run build