# CollectionEmptyState

**Category:** Features/Display/Empty States

## Design

### Description

Displays an empty state for a table when no items exist in the collection. Pass through the `emptyState` prop of a [`Grid`](./?path=/story/base-components-collections-grid-grid--grid), [`Table`](./?path=/story/base-components-collections-table-table--table), or other collection component.


```tsx
import { CollectionEmptyState } from '@wix/patterns';
```

### Demo

```tsx
import { Avatar } from '@wix/design-system';
import React from 'react';
import { CollectionPage } from '@wix/patterns/page';
import {
  CollectionEmptyState,
  TableGridSwitch,
  useTableGridSwitchCollection,
} from '@wix/patterns';
import { contacts } from '@wix/crm';

function EmptyStateDemo() {
  const state = useTableGridSwitchCollection<contacts.Contact>({
    queryName: 'contacts-EmptyStateDemo',
    paginationMode: 'offset',
    fetchData: () =>
      Promise.resolve({
        items: [],
        total: 0,
      }),
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="500px">
      <CollectionPage.Header title={{ text: 'Contacts' }} />
      <CollectionPage.Content>
        <TableGridSwitch
          state={state}
          columns={[
            {
              title: '',
              width: '50px',
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
            {
              title: 'Last Activity',
              render: (contact) =>
                contact.lastActivity?.activityDate?.toLocaleString(),
            },
          ]}
          emptyState={
            <CollectionEmptyState addNewCta={{ onClick: () => {} }} />
          }
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

### 2 CTAs

Use the `customCta` prop to add an extra call to action beside the default **+ Add Item** button.

```tsx
import { Avatar, TextButton } from '@wix/design-system';
import React from 'react';
import { CollectionPage } from '@wix/patterns/page';
import {
  CollectionEmptyState,
  TableGridSwitch,
  useTableGridSwitchCollection,
} from '@wix/patterns';
import { More } from '@wix/wix-ui-icons-common';
import { contacts } from '@wix/crm';

function EmptyState2CTAs() {
  const state = useTableGridSwitchCollection<contacts.Contact>({
    queryName: 'contacts-EmptyState2CTAs',
    paginationMode: 'offset',
    fetchData: () =>
      Promise.resolve({
        items: [],
        total: 0,
      }),
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="500px">
      <CollectionPage.Header title={{ text: 'Contacts' }} />
      <CollectionPage.Content>
        <TableGridSwitch
          state={state}
          columns={[
            {
              title: '',
              width: '50px',
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
            {
              title: 'Last Activity',
              render: (contact) =>
                contact.lastActivity?.activityDate?.toLocaleString(),
            },
          ]}
          emptyState={
            <CollectionEmptyState
              addNewCta={{ onClick: () => {} }}
              customCta={
                <TextButton prefixIcon={<More />}>More Actions</TextButton>
              }
            />
          }
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

### Passive Empty State

Exclude the `addNewCta` prop to display an empty state without options for user interaction.

```tsx
import { Avatar, Text, TextButton } from '@wix/design-system';
import React from 'react';
import { CollectionPage } from '@wix/patterns/page';
import {
  CollectionEmptyState,
  TableGridSwitch,
  useTableGridSwitchCollection,
} from '@wix/patterns';
import { contacts } from '@wix/crm';

function PassiveEmptyState() {
  const state = useTableGridSwitchCollection<contacts.Contact>({
    queryName: 'contacts-passive',
    paginationMode: 'offset',
    fetchData: () =>
      Promise.resolve({
        items: [],
        total: 0,
      }),
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="500px">
      <CollectionPage.Header title={{ text: 'Contacts' }} />
      <CollectionPage.Content>
        <TableGridSwitch
          state={state}
          columns={[
            {
              title: '',
              width: '50px',
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
            {
              title: 'Last Activity',
              render: (contact) =>
                contact.lastActivity?.activityDate?.toLocaleString(),
            },
          ]}
          emptyState={<CollectionEmptyState />}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

## API

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `addNewCta` | `NewItemButtonProps` | No | - | Configuration for the default call to action button.\ `onClick`: Adds a callback for when the button is clicked. <br> `text`: Text of the button. To render the default add new item button, you must provide the `onClick` callback. |
| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute to be used in the tests |
| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component’s root element. |
| `children` | `ReactNode` | No | - | Contains components rendered below the subtitle, e.g., `<Button/>` or `<TextButton/>` |
| `title` | `string` | No | - | Overrides the default title. |
| `skin` | `"page" \| "page-no-border" \| "section"` | No | `'section'` | Sets the style skin for the empty state |
| `theme` | `"page" \| "page-no-border" \| "section"` | No | - | @deprecated use skin prop instead |
| `subtitle` | `string` | No | - | Overrides the default subtitle. |
| `image` | `ReactNode` | No | - | Overrides the default image. Accepts a custom `ReactElement` or boolean value. Pass `false` to hide the default image. |
| `classNames` | `{ imageContainer?: string; }` | No | - | Sets the empty state image bottom margin. If not specified, use the default padding defined in the CSS. |
| `align` | `"start" \| "center" \| "end"` | No | `'center'` | Sets the alignment of all empty state contents within the component container |
| `customCta` | `ReactNode` | No | - | Adds another custom call to action button. Pass a [TextButton](https://www.docs.wixdesignsystem.com/?path=/story/components-actions--textbutton) component. |