Empty State

The Open UI Kit Empty State gives users a clear, calm explanation when a page, list, search, or panel has no content to show.

Introduction

Empty State combines an illustration, title, description, and optional action into a reusable empty-content pattern. It supports info, positive, warning, and negative variants, plus large, medium, and small sizes.

Use it when the interface is valid but has nothing meaningful to render yet: no search results, no configured resources, no alerts, or a successful cleanup that leaves the view empty.

No projects yet

Create a project to start collecting findings, owners, and reports in one place.

Import

import { EmptyState, GeneralSize } from '@open-ui-kit/core';

Variants

Use the variant to match the emotional meaning of the empty view. Most empty views should use info; reserve positive, warning, and negative for states with a clear status meaning.

info

No matches found

positive

Everything is resolved

warning

Configuration missing

negative

Unable to load results

Sizes

Use large for full-page empty states, medium for panels and cards, and small for compact inline results. Small empty states intentionally hide the title and action to keep dense layouts quiet.

No reports yet

Reports will appear here after the first scheduled export completes.

No filters selected

Choose at least one filter to preview matching assets.

No matches found

Direction

Use column layout for centered surfaces. Use row layout when the empty state sits inside a wide panel or next to surrounding content.

Column layout

Use this for centered cards, tables, and full-page empty views.

Row layout

Use this when the surrounding panel has enough horizontal room.

Without Action

Actions are optional. Skip the action when the state is informational, automatically resolved, or already paired with nearby controls.

No activity

Recent events will appear here automatically.

All caught up

There are no open tasks for this workspace.

Props

Prop	Type	Default	Description
`variant`	`'info' \| 'positive' \| 'warning' \| 'negative'`	`'info'`	Illustration and status tone.
`direction`	`'column' \| 'row'`	`'column'`	Layout direction for illustration and text.
`size`	`GeneralSize.Large \| GeneralSize.Medium \| GeneralSize.Small`	`GeneralSize.Large`	Illustration scale, spacing, typography, and action size.
`title`	`string`	`''`	Main empty state heading. Hidden for small size.
`description`	`string`	`'No matches found'`	Supporting explanation.
`actionCallback`	`() => void`	-	Enables the action button when paired with `actionTitle`.
`actionTitle`	`string`	-	Action button label. Hidden for small size.
`actionButtonProps`	`ButtonProps`	-	Props passed to the internal action button.
`containerProps`	`StackProps`	-	Props passed to the root container.

Accessibility

Write a description that explains why the content is missing and what the user can do next. When an action is present, make the label specific, such as "Create project" or "Clear filters". Do not rely on the illustration or variant color alone to communicate meaning.

Usage guidance

Use info for neutral empty content and zero-result states.
Use positive for successful cleanup or complete states.
Use warning when the empty view needs attention but is not destructive.
Use negative when content is missing because of an error or blocked condition.
Keep titles short and descriptions practical.