ComponentsData
Empty state
Say why there's nothing here, and offer the next step.
Theme
Motion
Say why there's nothing here, and offer the next step.
Invoices you send show up here, with their payment status.
<EmptyState
isBordered
icon={<FileIcon />}
title="No invoices yet"
description="Invoices you send show up here, with their payment status."
actions={
<>
<Button><PlusIcon /> New invoice</Button>
<Button variant="outline">Import</Button>
</>
}
/>The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { EmptyState } from "junco";
<EmptyState
icon={<InboxIcon />}
title="No invoices yet"
description="Invoices you send show up here."
actions={<Button>New invoice</Button>}
/>Say why it's empty and offer the way out.
Check the spelling, or search all workspaces.
EmptyState#titledescriptioniconactionssizeisBorderedtitleAsclassNames| Prop | Type | Default |
|---|---|---|
titleRequired. What's empty, in plain words. | ReactNode | – |
descriptionWhy, and what happens next. | ReactNode | – |
iconA small icon in a bordered tile. | ReactNode | – |
actionsButtons for the next step. Lead with one primary action. | ReactNode | – |
sizePadding and type size. | "sm" | "md" | "lg" | "md" |
isBorderedA dashed outline, for an area the user can fill. | boolean | false |
titleAsElement for the title, to fit the page outline. | "h2" | "h3" | "h4" | "p" | "h3" |
classNamesClass overrides for each part. | { root?, icon?, title?, description?, actions? } | – |