Show an empty zone with a next step
Name what is missing and put the next step in `actions`.
Install
pnpm add @zedtech/zedkit-uiPackage version: 0.6.4 (changesets).
Import
import { EmptyState, EmptyStateProps } from "@zedtech/zedkit-ui";Registry source
Copy into your app after npx shadcn add (imports are rewritten for consumers).
import type * as React from "react";
import { Heading } from "@/components/ui/typography";
import { Text } from "@/components/ui/typography";
import { cn } from "@/lib/utils";
export interface EmptyStateProps {
title?: React.ReactNode;
description: React.ReactNode;
actions?: React.ReactNode;
className?: string;
}
/** Empty zone: what it is, plus the next step in `actions`. */
export function EmptyState({ title, description, actions, className }: EmptyStateProps) {
return (
<div
data-slot="empty-state"
className={cn("flex flex-col items-center gap-3 py-8 text-center", className)}
>
{title ? <Heading level={3}>{title}</Heading> : null}
<Text variant="muted">{description}</Text>
{actions ? <div className="flex flex-wrap items-center justify-center gap-2">{actions}</div> : null}
</div>
);
}
Exports
2 symbols from this import. Wraps: `(none)`
Preview
@zedtech/zedkit-ui — EmptyState, EmptyStateProps
Preview
No invoices
Create an invoice to send to a client.
Examples
import { EmptyState } from "@zedtech/zedkit-ui";
<EmptyState title="No invoices" description="Create an invoice to send to a client." />Live preview: With a next step
Preview
No invoices
Create an invoice to send to a client.
import { Button, EmptyState } from "@zedtech/zedkit-ui";
<EmptyState
title="No invoices"
description="Create an invoice to send to a client."
actions={<Button>New invoice</Button>}
/>Props
Prop
Type
Accessibility
The title is a heading. Write the description as what is missing plus the next step; put that step in `actions` so keyboard users can take it. Do not rely on colour alone.
Related
Troubleshooting
The heading is missing — pass `title`. The next step is only in the description — pass it as `actions` so it is a control. A table cell is empty — use `DataTableEmpty` inside the table, not this host.