Components / feedback
Empty State
Fills a page, table or panel that has no content to show.
import { EmptyState } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { EmptyState } from '@basiiik/ui';
<EmptyState title="No projects yet">Create a project to get started.</EmptyState>- Example values were filled in for the required prop title: replace them with your own.
- Empty State has no interactive states. Pass
icon={false}to hide the icon, omitactionto hide the button, and setheadingLevelto fit the page outline. - Compose with: button.
- Storybook: Feedback/Empty State.
Props
| Prop | Type | Notes |
|---|---|---|
size | "sm" | "md" | Default "sm" |
variant | "error" | "default" | "no-results" | Default "default" |
title required | ReactNode | |
children | native attribute | |
icon | ReactNode | |
action | ReactNode |
Other props
| Prop | Type | What it does |
|---|---|---|
headingLevel | 2 | 3 | 4 | 5 | 6 | 1 | Heading level for the title (1 to 6). Choose the level that fits the page outline. |
States. Empty State has no interactive states. Pass icon={false} to hide the icon, omit action to hide the button, and set headingLevel to fit the page outline.
Native attributes such as className, id and data-* are forwarded to the root element.
Use it when
- No data yet, no search results, or a failed load
Do not use it when
- Content is still loading (use Skeleton)
Rules for agents
- Choose variant by cause: default for first use, no-results after a search or filter, error when loading failed
- Set headingLevel to fit the page outline
- Offer at most one next step in action, usually a Button that fixes the cause
- Use size="sm" inside tables, cards and panels, and "md" for a whole page
Avoid
- An Empty State while content is still loading (use Skeleton)
- A title with no explanation or next step, such as just 'No data'
- Several competing actions
- Blaming the user in an error state
- Using variant="error" for an empty list that is expected
Writing the content
- The title says what is missing: 'No projects yet', 'No results for "invoice"'
- The text says why and what to do next, in one sentence
- Action labels are a verb: 'Create project', 'Clear filters', 'Try again'
- Use sentence case
Keyboard
- Primary action is focusable
Accessibility
- Use a heading level appropriate to the page outline
Colour tokens it reads
color.bg.brand.defaultcolor.bg.brand.subtlecolor.bg.danger.subtlecolor.bg.subtlecolor.icon.brandcolor.icon.secondarycolor.text.dangercolor.text.on-brandcolor.text.primarycolor.text.secondaryRelated
feedback 6 Figma variants Try it in the live demo