#EmptyState

EmptyState communicates that a space has no content — whether because a collection is empty, a search returned no matches, or a filter is too narrow. Use compound components: EmptyStateIllustration, EmptyStateMessage, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, EmptyStateLink.

type picks the scale, and every slot follows it from context — no need to restate it on children. collection-empty is the page-level treatment: a medallion (a 36px raised tile holding a 20px icon), a pixel title, and room for actions plus a link. no-results is the compact inline treatment for a card, dropdown or select menu: 240px wide, with a 14px secondary title. An illustration always carries the medallion — there is no bare glyph.

Scale is not the same question as cause. A page-level "no filter matches" state still uses collection-empty — it just drops the create CTA and offers a neutral one instead.

Source · Storybook

#Usage

import { Button } from '@wallarm-org/design-system/Button';
import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIllustration, EmptyStateLink, EmptyStateMessage, EmptyStateTitle } from '@wallarm-org/design-system/EmptyState';
import { Shapes } from '@wallarm-org/design-system/icons';

#Examples

#No filter results

The page-level state for a search or filter that matched nothing. Same collection-empty scale as an untouched collection — the difference is the CTA: a neutral "get back to something" action, never a create action, because the data exists and the query is what needs changing.

#Minimal

The compact state at its spec default: no icon, no actions — just the title and subtitle. This is the shape most in-app empty states take.

#No results examples

The compact form in its real homes — a chart card with no data, and a Select whose option list came back empty. An empty inside a container stays action-light however it got that way.

#Medallion

The medallion reads as a lit surface: a top-down gradient, a hairline border, a soft drop shadow and an inner top highlight. Every layer resolves through --color-component-empty-state-medallion-* and --shadow-empty-state-medallion, so it holds up on both the card surface and the slightly darker page surface it sits on — shown here side by side. Use the toolbar theme switcher to check it in dark.

#Props

#EmptyStateActions

#EmptyStateDescription

#EmptyStateIllustration

#EmptyStateLink

#EmptyStateMessage

#EmptyStateTitle

#Explorer