Empty State
Displays a message when there is no content to show.
Anatomy
<EmptyState.Root filled>
<EmptyState.Icon>
<SearchIcon />
</EmptyState.Icon>
<EmptyState.Content>
<EmptyState.Title>No results found</EmptyState.Title>
<EmptyState.Description>Try adjusting your search</EmptyState.Description>
</EmptyState.Content>
<EmptyState.Actions>
<EmptyState.Action>Clear filters</EmptyState.Action>
</EmptyState.Actions>
</EmptyState.Root>
Components
EmptyState.Root
The root container for the empty state.
Whether to show a filled background
EmptyState.Icon
Icon that visually represents the empty state.
Custom icon element. Defaults to search icon if not provided.
EmptyState.Content
Container that groups title and description.
EmptyState.Title
The main heading text.
EmptyState.Description
Supporting description text.
EmptyState.Actions
Container for action buttons.
EmptyState.Action
Action button (tertiary variant, s size).
Button variant (inherited from Button component)
Button size (inherited from Button component)
Usage
Basic Empty State
Minimal empty state without background.
<EmptyState.Root>
<EmptyState.Icon />
<EmptyState.Content>
<EmptyState.Title>No items</EmptyState.Title>
</EmptyState.Content>
</EmptyState.Root>
Filled Empty State
Empty state with background for emphasis.
<EmptyState.Root filled>
<EmptyState.Icon />
<EmptyState.Content>
<EmptyState.Title>No items</EmptyState.Title>
<EmptyState.Description>Get started by creating your first item</EmptyState.Description>
</EmptyState.Content>
<EmptyState.Actions>
<EmptyState.Action>Create item</EmptyState.Action>
</EmptyState.Actions>
</EmptyState.Root>
Custom Icon
Provide your own icon element.
<EmptyState.Root>
<EmptyState.Icon>
<CustomIcon />
</EmptyState.Icon>
<EmptyState.Content>
<EmptyState.Title>No data available</EmptyState.Title>
</EmptyState.Content>
</EmptyState.Root>