Components

Empty state

Says why there is nothing here and what to do next — with a tone, link buttons and an optional code snippet.

EmptyState centers an icon well, a title, a short explanation and the link buttons that fit the case. The variant says why the place is empty and sets the icon, the tone and how it is announced: error as an alert, the others as a status.

Screenshot of the Empty state block — Empty state`EmptyState`

Usage

src/pages/invoices.ts

import { EmptyState } from "@antelopejs/interface-dms/base/empty-state";

static noInvoices = EmptyState({
  title: "$billing.invoices.empty_title",
  description: "$billing.invoices.empty_description",
  actions: [{ label: "$billing.invoices.create", to: "/invoices/new", icon: "i-ph-plus" }],
});

Options

Options of the Empty state block
Option	Type	Default	Description
`title`*Content	`string`	–	Title of the empty state.
`description`Content	`string`	–
`code.content`*Content	`string`	–
`code.language`Content	`"json" \| "javascript" \| "typescript" \| "html" \| "sql" \| "shell" \| …`	–
`code.copy`Content	`boolean`	–
`variant`Appearance	`"no-data" \| "no-result" \| "no-access" \| "error"`	`"no-data"`	Why it is empty; sets the icon and the tone.
`icon`Appearance	`string`	–	Overrides the variant's icon.
`tone`Appearance	`"neutral" \| "primary" \| "secondary" \| "success" \| "warning" \| "error" \| …`	–
`size`Appearance	`"sm" \| "md" \| "lg"`	`"md"`
`hatched`Appearance	`boolean`	–	Hatched panel behind it.
`card`Appearance	`boolean`	`true`	Draws the block on a card; turn it off when it already sits in one.

`variant`	Use it when
`no-data`	Nothing exists yet. The default.
`no-result`	A search or a filter matched nothing.
`no-access`	The viewer may not see what is here.
`error`	Something failed; announced as an alert.

Recipes

Show it only when the data says so

To show an empty state in place of other blocks — a record with no traffic yet, instead of empty charts — wrap those blocks in a Guard and give it these options as fallback.

Start with a snippet

A first-run screen shows the call to make with code, drawn as a code block with its copy button (copy: false drops it).

Pitfalls

Inside a Card or a Section, set card: false.
The first action leads (solid); the others follow in a quieter style.

Next steps

Guard

Swap blocks for an empty state on a route's answer.

Table empty states

The empty states a table draws on its own.

Navigation cards

A grid of cards linking to other pages, each with an icon, a description and the target's live state.

Banner

A notice with a tone, link buttons and a remembered dismiss — static, or fetched from a route that decides whether to show it.