EmptyState
What to show when a list or search has no results.
No search results
Use this when a search or filter returns no items. Give a reset action that clears the filters.
No results found
Try a different search or clear the filters.
First run
Use this before the user creates the first item. Give one primary action that creates it.
Start a conversation
Create the first topic for your team.
Small size
Use md (the default) in most places. Use sm in dense UI or a small region, such as a card or a panel.
No team members
Team members appear here after they join.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Say why the area is empty and what the user can do next. Use
Actionsfor the first step or a way to recover. - The icon is decorative. Put the information in the title and description.
API
EmptyState is a site component. Its parts accept standard HTML props unless listed below.
EmptyState.Root
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'md' | Sets the spacing and text size. |
| outlined | boolean | false | Renders the empty state inside Section.Root. |





