> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# 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](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/EmptyState) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/pages-emptystate--overview)
```tsx
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';
export const CollectionEmpty = () => (
Title text goes here
Description text explains what happened and what the user can do next.
One to two sentences maximum.
Link
);
```
## Usage
```tsx
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.
```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIllustration, EmptyStateMessage, EmptyStateTitle } from '@wallarm-org/design-system/EmptyState';
import { Zap } from '@wallarm-org/design-system/icons';
export const NoFilterResults = () => (
No attacks foundTry to apply different filter or reset it.
);
```
### 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.
```tsx
import { EmptyState, EmptyStateDescription, EmptyStateMessage, EmptyStateTitle } from '@wallarm-org/design-system/EmptyState';
export const Minimal = () => (
No resultsShort description
);
```
### 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.
```tsx
import { Card, CardContent, CardHeader, CardTitle } from '@wallarm-org/design-system/Card';
import { EmptyState, EmptyStateDescription, EmptyStateMessage } from '@wallarm-org/design-system/EmptyState';
import { Field, FieldLabel } from '@wallarm-org/design-system/Field';
import { Select, SelectButton, SelectContent, SelectPositioner } from '@wallarm-org/design-system/Select';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';
export const NoResultsExamples = () => (
{/* In a chart card */}
Bar chartNo data found for selected period
{/* In a select dropdown */}
Label
);
```
### 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.
```tsx
import { EmptyStateIllustration } from '@wallarm-org/design-system/EmptyState';
import { ScanLine } from '@wallarm-org/design-system/icons';
import { HStack } from '@wallarm-org/design-system/Stack';
import { cn } from '@wallarm-org/design-system/utils/cn';
export const Medallion = () => (
{(['bg-bg-surface-1', 'bg-bg-light-primary'] as const).map(surface => (