Empty

Proposed

What a list, table or pane shows before it has anything. Dashed border, one icon, one sentence, and the action that fills it.

@varick/ui/components/emptyAdded 2 Sept 2026

No runs yet

Runs appear here as soon as the agent is triggered, on schedule or by hand.

Usage

import { Empty } from "@varick/ui/components/empty";

export function Example() {
  return (
    <Empty title="No runs yet" description="Runs appear here as soon as the agent is triggered.">
      <Button variant="primary" size="sm" onClick={run}>Run now</Button>
    </Empty>
  );
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
title	string	required	What is missing, plainly.
description	string	undefined	How it gets filled.
icon	ReactNode	inbox icon	A 20px icon in the fill chip.
children	ReactNode	undefined	Actions, in a row.

Styles

Proposed CSS in Varick tokens. Nothing in the app renders this yet.

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 24px;
  border: 1px dashed var(--hairline-hover);
  border-radius: 4px;
  text-align: center;
}
.empty-icon { width: 40px; height: 40px; border-radius: 4px; background: var(--fill); display: grid; place-items: center; }
.empty-title { font-size: 13.5px; font-weight: 500; color: var(--fg-high); }
.empty-desc { font-size: 12.5px; line-height: 1.5; color: var(--fg-mid); max-width: 34ch; }