@highlight-ui/empty-state

Installation

Using npm:

npm install @highlight-ui/empty-state

Using yarn:

yarn add @highlight-ui/empty-state

Using pnpm:

pnpm install @highlight-ui/empty-state

In your (S)CSS file:

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

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

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

Usage

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 for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.