EmptyState

An empty state tells people why a view has no content and what to do next. It has one look everywhere: a gray icon with no frame, a gray title, one sentence, and at most one button. It is a conclusion ("there is nothing here"), so it never stands in for loading or a failure.

When to use

Anatomy

• EmptyState: the centered root. Required.
• EmptyStateContent: groups the icon, title and description. Required.
• EmptyStateIcon: a Lucide icon, at 36px in foreground-hint. Required.
• EmptyStateTitle: the title, in foreground-muted. Required.
• EmptyStateDescription: one sentence, in foreground-hint. A link in it is 600 with no underline at rest and underlines in ink on hover (Clickable text): the weight is what sets it apart from the grey sentence.
• EmptyStateActions: at most one button.

Content

• Write the title in sentence case and state the fact: "No tasks yet", "No tasks match these filters" (Writing).
• For a view with nothing yet, say in the description how something gets here.
• For filters or a search with no results, name the conditions that are active, and label the button Clear All.

Accessibility

• EmptyStateIcon is hidden from assistive technology (aria-hidden): the title says what is empty.
• When the empty state is the only content of a page or panel, render the title as a heading (render) at the level the page needs.

Rules

• Put the empty state directly in the middle of the content area. Don't wrap it in a card, frame the icon or add a sticker: empty states are working pages (Brand).
• Give it at most one button: a 32px ink-bordered button (variant="default" size="md"), never pink.
• Keep it quiet. The empty state is a hint, not a heading: small, faint type that doesn't compete with the button people should press next.