Empty
A clear explanation and next step when a collection has no content.
Built on Workshop1 compositionUpstream API
No bookings yet
Bookings will appear here once a customer chooses an arrival window.
Usage
import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@workshop1/ui/components/empty"Use an empty state outside the table or list it replaces. Name what belongs in the space, explain why it is empty, and offer one permitted next action. A no-results state is different: preserve the query and filters, then offer a clear-filter action.
Keep the icon relevant and decorative. Omit the action when the viewer cannot create content, and explain who can help instead.
Variants
| Variant | Frame | Use |
|---|---|---|
default | Dashed, 48px vertical padding | A collection or panel with nothing in it yet |
section | Dashed, 32px vertical padding | A section inside a page or card |
page | Dashed, 80px vertical padding (96px from sm) | A whole page whose primary list is empty |
inline | No frame, 16px vertical padding | Inside a surface that already has its own frame |
Pick the variant instead of adding padding, borders or backgrounds at the call site.
Accessibility
Use real heading semantics in the surrounding page when the empty title introduces a section. Button labels should name the outcome, such as “Create booking”.