npm package: @highlight-ui/empty-state
Description: This is the EmptyState component used by Personio
Author: Personio GmbH & Co. KG
Latest version: 7.3.6

[![npm](https://img.shields.io/npm/v/@highlight-ui/empty-state)](https://www.npmjs.com/package/@highlight-ui/empty-state)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/3081de-empty-state/b/23ab59)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/patterns-emptystate--icon-empty-state)

# @highlight-ui/empty-state

## Installation

Using npm:

```bash
npm install @highlight-ui/empty-state
```

Using yarn:

```bash
yarn add @highlight-ui/empty-state
```

Using pnpm:

```bash
pnpm install @highlight-ui/empty-state
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/empty-state');
```

Once the package is installed, you can import the library:

```ts
import { EmptyState } from '@highlight-ui/empty-state';
```

## Usage

```tsx
import React from 'react';
import { EmptyState } from '@highlight-ui/empty-state';

export default function EmptyStateExample() {
  return <EmptyState />;
}
```

## Props 📜

| Prop                   | Type                          | Required | Default                                               | Description                                                          |
| :--------------------- | :---------------------------- | :------- | :---------------------------------------------------- | :------------------------------------------------------------------- |
| `className`            | `string`                      | No       |                                                       | Allows providing a custom class name                                 |
| `customImage`          | `string`                      | No       | `''`                                                  | Allows providing a source for a custom image                         |
| `customImageClassName` | `string`                      | No       | `''`                                                  | Allows providing a classname for the custom image                    |
| `description`          | `React.ReactNode`             | No       | `'And this is additional text under the empty state'` | Allows providing a description ReactNode for the Empty State         |
| `iconColor`            | `IconColorToken`              | No       | `icon-default`                                        | Allows providing a color token for the icon on Empty State           |
| `iconFamily`           | `'regular', 'light', 'solid'` | No       | `solid`                                               | Allows providing an icon family for the icon on Empty State          |
| `iconName`             | `string`                      | No       | `'exclamation-square'`                                | Allows providing a FontAwesome icon name for the icon on Empty State |
| `iconSize`             | `number`                      | No       | `26`                                                  | Allows providing icon size for the icon on Empty State               |
| `onRetryButtonClick`   | `React.MouseEventHandler`     | No       |                                                       | A callback that will be fired once the retry button is clicked       |
| `retryButtonText`      | `string`                      | No       | `Retry`                                               | Allows providing text on the retry button                            |
| `retryButtonVariant`   | `'emphasized', 'plain'`       | No       | `emphasized`                                          | Allows choosing a variant for the retry button                       |
| `showRetryButton`      | `boolean`                     | No       | `false`                                               | Specifies if a retry button should be on the Empty State             |
| `title`                | `string`                      | No       |                                                       | Specifies a title for the Empty State                                |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/3081de-empty-state/b/23ab59) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).