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.