Empty

Empty states communicate when there is no content to show. Use them in tables, lists, and panels with a title, description, optional icon, and actions.

#
Usage

Title, description, and optional icon for empty content.

No items yet

Get started by creating your first item.

#
Actions

Empty state with call-to-action buttons.

No results found

Try adjusting your filters or search terms.

#
Bordered

Empty state inside a bordered container.

Nothing here

This area is empty. Add content to get started.

#API

Empty

props

Name	Description	Type	Default	Values
size	Control size. One of xs, sm, md, lg, xl.	String	md	xssmmdlgxl
title	Primary empty-state heading.	String
description	Supporting text shown below the title.	String
icon	Icon name shown above the title.	String	<path d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
bordered	Adds a border around the empty state.	Boolean	false

slots

Name	Description
icon	Custom icon; overrides the `icon` prop.
title	Custom title content; overrides the `title` prop.
description	Custom description content; overrides the `description` prop.
actions	Action controls shown below the description.

drawer

icon

Empty

#Usage

#Actions

#Bordered

#API

Empty

props

slots

#
Usage

#
Actions

#
Bordered