Content
EmptyState
Spectrum's illustrated message for a list with nothing in it: a Makado illustration (or, in tight spaces, a large icon in a gray circle), a heading, one sentence and an optional action.
Preview
Props
| Prop | Type | Description |
|---|---|---|
titleRequired | React.ReactNode | |
description | React.ReactNode | |
icon | IconName | |
illustration | IllustrationName | A Makado spot illustration name; replaces the icon circle. |
illustrationSize | number | |
className | string | |
children | React.ReactNode |
Guidelines
Spectrum's illustrated message for a list with nothing in it: a Makado illustration (or, in tight spaces, a large icon in a gray circle), a heading, one sentence and an optional action.
Provide: illustration (an Illustration name) and optional illustrationSize, or icon; title, description, and buttons as children.
- Lists that are empty (No projects yet, No brands yet, No products yet, No contracts yet, No invoices yet) use a line icon from the system in the gray circle, the same icon the section uses elsewhere (
folder,briefcase,tag,file-text,wallet). Roger's call, October 20, 2026: one quiet style across the app. - Keep illustrations for small celebrations and rare first-run moments, never for an ordinary empty list.
- Empty is often good news. Say so warmly, then point to the next useful thing.