EmptyState
Where something will be, before it is: a dotted box saying what's missing, a supporting line on how to fill it, and the way to. A day with nothing booked offers Book and says Okami can do it.
A day ahead, nothing booked
Nothing booked yet
Book a time, or just tell Okami: “Book Peter for a haircut at 10.”
<EmptyState
title="Nothing booked yet"
action={<Button variant="primary" size="sm" leadingIcon={Plus}>Book</Button>}
>
Book a time, or just tell Okami: “Book Peter for a haircut at 10.”
</EmptyState>A day gone by
Nothing was booked
<EmptyState title="Nothing was booked" />A whole page, nothing yet
With an icon: the studio's green glass tile over the words, no box. For a page that has nothing at all yet, the Inbox, Clients.
No clients yet
Everyone who books lands here.
<EmptyState icon={UserMultiple02Icon} title="No clients yet">
Everyone who books lands here.
</EmptyState>API
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | What's missing, in a few words. |
| children | ReactNode | — | How to fill it: one small supporting line. |
| icon | IconSvgElement | — | A whole page's: its Hugeicons glyph on the green GlassTile, no dotted box. |
| action | ReactNode | — | The way to: a button. |
Guidelines
- Dashed like a free gap: an empty place to fill, not a card.
- Offer an action only when there's one to take — a day gone by says only what was.