Empty
Says a list, table or panel has nothing in it yet, and what to do next.
Installation
The CLI installs the Radix or Base UI file to match your project.
If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.
When to use
Use it
- A list, table, card or panel has nothing to show yet, and people need to know why and what to do.
- A search or filter returns no results, as the No results example shows.
- People have cleared every item, like a finished task list.
Usage
Empty
├── EmptyHeader
│ ├── EmptyMedia
│ ├── EmptyTitle
│ └── EmptyDescription
└── EmptyContentEmptyMedia, EmptyDescription and EmptyContent are optional. Actions go in EmptyContent, after the header. Add the border class to Empty for a dashed frame.
import {
Empty,
EmptyDescription,
EmptyHeader,
EmptyTitle,
} from "@/components/ui/empty"<Empty className="border">
<EmptyHeader>
<EmptyTitle>No tasks due today</EmptyTitle>
<EmptyDescription>Tasks assigned to you show up here.</EmptyDescription>
</EmptyHeader>
</Empty>Inside a card, put Empty in CardContent, and leave the action out of the card header so it isn't shown twice.
Examples
No results
A filter that matches nothing: an `EmptyTitle` and an `EmptyDescription` with a link to clear filters, and no media.
API reference
| Part | Built on |
|---|---|
Empty | <div> (opens in a new tab) |
EmptyHeader | <div> (opens in a new tab) |
EmptyMedia | <div> (opens in a new tab) |
EmptyTitle | <div> (opens in a new tab) |
EmptyDescription | <p> (opens in a new tab) |
EmptyContent | <div> (opens in a new tab) |
EmptyMedia
| Prop | Type | Default |
|---|---|---|
variant | "default" | "icon" | "default" |
SLDS mapping
Empty follows SLDS 2's empty state, slds-illustration slds-illustration_small, without its illustrations. EmptyTitle is slds-text-heading_medium and EmptyDescription is slds-text-body_regular, both in the body color. Links in the description take SLDS's link colors, with an underline SLDS doesn't have, since in Cosmos the link blue is too close to the navy text to tell apart by color alone.
Known gaps:
- SLDS's illustrations are Salesforce artwork and aren't included. Pass your own image to
EmptyMedia.
| Prop | Value | SLDS | Notes |
|---|---|---|---|
EmptyMedia variant | default | slds-illustration__svg | Holds an image or illustration at its own size. |
EmptyMedia variant | icon | none | A 40px gray square with a 24px icon. SLDS has no icon box. |
Accessibility
- The title isn't a heading. Put one inside
EmptyTitle, like<h2>, when the page outline needs it. - Make the action's label say what it does, like "New opportunity".
Responsive behavior
- It fills its container and centers its content. The header and content are at most 24rem wide.
Rules
- Say why the area is empty and what to do next, in one or two short sentences.
- Give one clear action in
EmptyContentwhen there is one. - Don't draw Salesforce's illustrations. Use
EmptyMedia variant="icon"with an icon, or your own image.