Empty
Displays a placeholder when a view has no content. Compose an Empty from an
EmptyHeader — containing an optional EmptyMedia, an EmptyTitle, and an
EmptyDescription — plus an optional EmptyContent for actions.
You don’t have any messages yet.
Media variants
Use the icon variant of EmptyMedia for a muted icon container. The
default variant is a transparent wrapper for custom media such as avatars or
illustrations.
Invite people to start collaborating.
Multiple actions
Place buttons or links inside EmptyContent.
The content could not be loaded.
Without media
Try adjusting your search or filters.
Component props
EmptyMedia
| Name | Type | Description |
|---|---|---|
| variant | 'default' | 'icon' | Media style (default: "default"). Use "icon" for a muted icon container. |
| children | ReactNode | An svg icon, avatar, or other media |
Empty, EmptyHeader, EmptyMedia, EmptyTitle, and EmptyContent accept
standard div props including className; EmptyDescription renders a p
element. They expose data-slot="empty", data-slot="empty-header",
data-slot="empty-icon", data-slot="empty-title",
data-slot="empty-description", and data-slot="empty-content" attributes for
styling.