---
sidebar_position: 5
---

import { Empty, EmptyProductBoxIcon, SearchNotFoundIcon } from "rizzui";
import Paper from "@site/src/components/paper";

# Empty

Empty state component. This component gives a message when some part or data is empty.

```tsx
import { Empty } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of the **Empty**.

<Paper>
  <Empty
    text="No Data"
    textClassName="mt-2"
  />
</Paper>

```tsx
import { Empty } from "rizzui";

export default function App() {
  return (
    <Empty
      text="No Data"
      textClassName="mt-2"
    />
  );
}
```

<div className="mb-16" />

## No Product

You can use it if your product is **Empty**.

<Paper>
  <Empty
    image={<EmptyProductBoxIcon />}
    text="No Product Available"
  />
</Paper>

```tsx
import { Empty, EmptyProductBoxIcon } from "rizzui";

export default function App() {
  return (
    <Empty
      image={<EmptyProductBoxIcon />}
      text="No Product Available"
    />
  );
}
```

<div className="mb-16" />

## No Result Found

You can use it if your search is **Empty**.

<Paper>
  <Empty
    image={<SearchNotFoundIcon />}
    text="No Result Found"
  />
</Paper>

```tsx
import { Empty, SearchNotFoundIcon } from "rizzui";

export default function App() {
  return (
    <Empty
      image={<SearchNotFoundIcon />}
      text="No Result Found"
    />
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Empty Props

Here is the API documentation of the Empty component.

<div className="overflow-x-auto">

|         Props         |                Type                |                          Description                           |  Default   |
| :-------------------: | :--------------------------------: | :------------------------------------------------------------: | :--------: |
|         text          |              `string`              |         Set custom text message of the Empty component         |    \_\_    |
|     textClassName     |              `string`              |               Set custom classes for text style                |    \_\_    |
|         image         |            `ReactNode`             |               Add custom image or icon component               |    \_\_    |
|    imageClassName     |              `string`              | Add custom classes on to the image or icon component's wrapper |    \_\_    |
|   defaultImageWidth   |         `string` `number`          |          Set custom width of the default image / icon          |   `184`    |
|  defaultImageHeight   |         `string` `number`          |         Set custom height of the default image / icon          |   `152`    |
| defaultImageClassName |              `string`              |        Set custom className of the default image / icon        |    \_\_    |
|        textTag        | [EmptyTextTags](#empty-text-tags)  |                 Here you can use your text tag                 |   `"p"`    |
|       alignment       | [EmptyAlignment](#empty-alignment) |         Set custom text message of the Empty component         | `"center"` |
|       className       |              `string`              |               Add custom classes for extra style               |    \_\_    |

</div>

<div className="mb-10" />

### Empty Text Tags

```ts
type EmptyTextTags = "h2" | "h3" | "h4" | "h5" | "h6" | "p";
```

<div className="mb-10" />

### Empty Alignment

```ts
type EmptyAlignment = "center" | "inlineStart" | "inlineEnd";
```
