Usage
import { Empty, EmptyActions, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@desk/ui/components/empty";Best practices
Use
Emptyfor "no data / nothing here"; a failure the user can retry is anErrorState(which composesEmpty), so don't hand-roll a retry empty.Compose
EmptyHeader›EmptyMedia+EmptyTitle+EmptyDescription, and put the call-to-action inEmptyActions.
Props
Empty
| Prop | Type | Default | Description |
|---|---|---|---|
| layout | EmptyLayout | "centered" | Layout variant. |
| minHeight | string | "min-h-[50vh]" | Tailwind min-height class applied only in the |
| size | "base" | "sm" | "lg" | null | undefined |
EmptyDescription
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | Merge props onto child |
EmptyMedia
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Custom media content, such as an illustration or animated preview. | |
| icon | LucideIcon | Icon to display | |
| plain | boolean | Render the icon bare (no rounded IconBox surface), per Figma's empty/error
states. The icon is tinted by | |
| size | "base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | null | undefined | Override the icon size | |
| tone | "neutral" | "brand" | "danger" | "warning" | "success" | "info" | null | undefined | Semantic surface tone for the IconBox (also tints the bare icon when
|
EmptyTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | Merge props onto child | |
| level | HeadingLevel | "3" | Heading level for the document outline. |
Also exports
- component
EmptyActions - component
EmptyHeader
Composition
Used by