EmptyState

What to show when a list or search has no results.

import { EmptyState } from 'components/UI/EmptyState'

No search results

Use this when a search or filter returns no items. Give a reset action that clears the filters.

Try a different search or clear the filters.

Use this before the user creates the first item. Give one primary action that creates it.

Create the first topic for your team.

Use md (the default) in most places. Use sm in dense UI or a small region, such as a card or a panel.

Team members appear here after they join.

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 Actions for the first step or a way to recover.
The icon is decorative. Put the information in the title and description.

EmptyState is a site component. Its parts accept standard HTML props unless listed below.

Prop	Type	Default	Description
size	'sm' \| 'md'	'md'	Sets the spacing and text size.
outlined	boolean	false	Renders the empty state inside Section.Root.