# @synerise/ds-empty-states

> EmptyStates UI Component for the Synerise Design System

Latest version **2.0.4** (published 2026-09-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @synerise/ds-empty-states
pnpm add @synerise/ds-empty-states
yarn add @synerise/ds-empty-states
bun add @synerise/ds-empty-states
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2026-09-22 |
| First published | 2021-04-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | synerise |

## Links

- npm: https://www.npmjs.com/package/@synerise/ds-empty-states
- Repository: Synerise/synerise-design
- npm.io page: https://npm.io/package/@synerise/ds-empty-states

## Recent versions

- 2.0.4 (latest) — 2026-09-22
- 2.0.3 — 2026-09-18
- 2.0.2 — 2026-09-16
- 2.0.1 — 2026-09-02
- 2.0.0 — 2026-08-26
- 1.0.49 — 2026-07-23
- 1.0.48 — 2026-06-17
- 1.0.47 — 2026-06-11
- 1.0.46 — 2026-05-26
- 1.0.45 — 2026-05-22
- 1.0.44 — 2026-05-13
- 1.0.43 — 2026-05-04
- 1.0.42 — 2026-04-29
- 1.0.41 — 2026-04-28
- 1.0.40 — 2026-04-24
- … 128 more at https://npm.io/package/@synerise/ds-empty-states/versions

## README

---
id: empty-states
title: EmptyStates
---

EmptyStates UI Component

## Installation

```
npm i @synerise/ds-empty-states
or
yarn add @synerise/ds-empty-states
```

## Usage

```
import EmptyStates from '@synerise/ds-empty-states'

<EmptyStates />

```

## Demo

<iframe src="/storybook-static/iframe.html?id=components-empty-states--default"></iframe>

## API

| Property      | Description                                               | Type                                    | Default  |
| ------------- | --------------------------------------------------------- | --------------------------------------- | -------- |
| size          | Icon size                                                 | `small` / `medium`                      | `small`  |
| label         | Secondary label text                                      | string / React.ReactNode                | -        |
| labelPosition | **@deprecated** — has no effect on rendering              | `right` / `bottom`                      | -        |
| text          | Header / primary text                                     | string / React.ReactNode                | -        |
| button        | Action button rendered below label                        | React.ReactNode                         | -        |
| fontSize      | Header font size (`small` = 14px, `medium` = 18px)        | `small` / `medium`                      | `small`  |
| customIcon    | Icon element rendered via `@synerise/ds-icon`             | React.ReactElement                      | -        |
| iconPosition  | Position of icon relative to content                      | `top` / `left` / `right`               | `top`    |
| textAlign     | Text alignment of the content area                        | `left` / `center` / `right` / `justify` | `center` |
| mode          | `absolute` positions wrapper at top:50% left:50%          | `absolute`                              | -        |
| className     | Additional CSS class (merged with `ds-empty-states`)      | string                                  | -        |

---
_Source: https://npm.io/package/@synerise/ds-empty-states · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._