Empty

Placeholder for a list, table or page with nothing to show. The title is an <h2>.

No runs yet

Runs you start appear here.

import { PlusIcon, TrayIcon } from "@phosphor-icons/react";
import { Button } from "@etched/reticle/button";
import { Empty } from "@etched/reticle/empty";

export function Preview() {
  return (
    <Empty
      size="sm"
      icon={<TrayIcon />}
      title="No runs yet"
      description="Runs you start appear here."
      contents={
        <Button variant="primary" icon={<PlusIcon />}>
          New run
        </Button>
      }
    />
  );
}

Installation

import { Empty } from "@etched/reticle/empty";

Examples

With actions

No runs yet

Runs you start on a bench appear here, newest first.

import { PlusIcon, TrayIcon } from "@phosphor-icons/react";
import { Button } from "@etched/reticle/button";
import { Empty } from "@etched/reticle/empty";

export function WithActions() {
  return (
    <Empty
      icon={<TrayIcon />}
      title="No runs yet"
      description="Runs you start on a bench appear here, newest first."
      contents={
        <div className="row">
          <Button>Import runs</Button>
          <Button variant="primary" icon={<PlusIcon />}>
            New run
          </Button>
        </div>
      }
    />
  );
}

Sizes

No data (sm)

There is no data for this bench yet.

No data (base)

There is no data for this bench yet.

No data (lg)

There is no data for this bench yet.

import { DatabaseIcon } from "@phosphor-icons/react";
import { Empty, type EmptySize } from "@etched/reticle/empty";

const sizes: EmptySize[] = ["sm", "base", "lg"];

export function Sizes() {
  return (
    <div className="grid">
      {sizes.map((s) => (
        <Empty key={s} size={s} icon={<DatabaseIcon />} title={`No data (${s})`} description="There is no data for this bench yet." />
      ))}
    </div>
  );
}

Error and text only

Without a description, the title shows as muted text.

No connection

Orbit cannot reach the server. Check your connection and try again.

No references or referrals yet.

import { CloudSlashIcon } from "@phosphor-icons/react";
import { Button } from "@etched/reticle/button";
import { Empty } from "@etched/reticle/empty";

export function ErrorAndTextOnly() {
  return (
    <div className="grid">
      <Empty
        size="sm"
        icon={<CloudSlashIcon />}
        title="No connection"
        description="Orbit cannot reach the server. Check your connection and try again."
        contents={<Button variant="primary">Retry</Button>}
      />
      <Empty size="sm" title="No references or referrals yet." />
    </div>
  );
}

API reference

Prop	Type	Default	Description
size	"sm" \| "base" \| "lg"	"base"
icon	ReactNode	–	Decorative icon above the title, for example `<TrayIcon />`. Sized and colored by the size.
title *	ReactNode	–	What is empty: "No runs yet". A large heading with a description, muted text without one.
description	ReactNode	–	What to do next: "Runs you start appear here."
contents	ReactNode	–	Actions below the text, such as a row of buttons.
className	string	–