Pill

A status chip: a tone's fill and ink, 24 px high, 13 px text. A style replaces the hue.

ActivatingInterviewingHired

import { Pill } from "@etched/reticle/pill";

export function Preview() {
  return (
    <div className="row">
      <Pill tone="blue">Activating</Pill>
      <Pill tone="cyan">Interviewing</Pill>
      <Pill tone="green">Hired</Pill>
    </div>
  );
}

Installation

import { Pill, PillButton } from "@etched/reticle/pill";

Examples

Tones

neutralredorangeamberolivegreentealcyanbluepurple

import { Pill, type PillTone } from "@etched/reticle/pill";

const tones: PillTone[] = ["neutral", "red", "orange", "amber", "olive", "green", "teal", "cyan", "blue", "purple"];

export function Tones() {
  return (
    <div className="row">
      {tones.map((tone) => (
        <Pill key={tone} tone={tone}>
          {tone}
        </Pill>
      ))}
    </div>
  );
}

Custom hues

A hue (0–360) colors a custom stage at the tones' lightness and chroma.

Custom stage 1Custom stage 2Custom stage 3Custom stage 4Custom stage 5Custom stage 6

import { Pill, type PillTone } from "@etched/reticle/pill";

const tones: PillTone[] = ["neutral", "red", "orange", "amber", "olive", "green", "teal", "cyan", "blue", "purple"];

// Orbit's custom-stage hues, between the fixed tones and never near red.
const hues = [236, 286, 134, 195, 99, 165];

export function CustomHues() {
  return (
    <div className="row">
      {hues.map((hue, i) => (
        <Pill key={hue} hue={hue}>
          Custom stage {i + 1}
        </Pill>
      ))}
    </div>
  );
}

Orbit pipeline stages

To DoActivatingSchedulingScheduledIn TouchInterviewingReferences checkNo ResponseRevisitHiredWe PassedDon't Contact

import { Pill, type PillTone } from "@etched/reticle/pill";

// Orbit's pipeline stages (talent/src/types.ts statusTones) and Ashby's statuses.
const stages: [string, PillTone][] = [
  ["To Do", "neutral"],
  ["Activating", "blue"],
  ["Scheduling", "orange"],
  ["Scheduled", "purple"],
  ["In Touch", "teal"],
  ["Interviewing", "cyan"],
  ["References check", "cyan"],
  ["No Response", "amber"],
  ["Revisit", "olive"],
  ["Hired", "green"],
  ["We Passed", "red"],
  ["Don't Contact", "red"],
];

export function OrbitPipelineStages() {
  return (
    <div className="row">
      {stages.map(([label, tone]) => (
        <Pill key={label} tone={tone}>
          {label}
        </Pill>
      ))}
    </div>
  );
}

Ashby statuses

LeadActiveHiredArchived

import { Pill, type PillTone } from "@etched/reticle/pill";

const ashby: [string, PillTone][] = [
  ["Lead", "blue"],
  ["Active", "cyan"],
  ["Hired", "green"],
  ["Archived", "red"],
];

export function AshbyStatuses() {
  return (
    <div className="row">
      {ashby.map(([label, tone]) => (
        <Pill key={label} tone={tone}>
          {label}
        </Pill>
      ))}
    </div>
  );
}

Buttons

PillButton is a pill you can press, such as your own follow-up that opens its dialog. It is the size of a Pill, so a row of both keeps its height. With render, it is a link, such as a role that opens its page.

Sam Lee · Oct 14 · SentCompiler Engineer

import { useState } from "react";
import { Button } from "@etched/reticle/button";
import { Dialog, DialogActions, DialogClose, DialogDescription, DialogRoot, DialogTitle } from "@etched/reticle/dialog";
import { Pill, PillButton } from "@etched/reticle/pill";

export function Buttons() {
  const [open, setOpen] = useState(false);

  return (
    <div className="row">
      <PillButton tone="blue" onClick={() => setOpen(true)}>
        Me · Oct 16, 6:00 PM · Queued
      </PillButton>
      <Pill>Sam Lee · Oct 14 · Sent</Pill>
      <PillButton render={<a href="#role-compiler" />}>Compiler Engineer</PillButton>
      <DialogRoot open={open} onOpenChange={setOpen}>
        <Dialog size="sm">
          <DialogTitle>Follow-up</DialogTitle>
          <DialogDescription>Queued for Oct 16 at 6:00 PM.</DialogDescription>
          <DialogActions>
            <DialogClose render={<Button>Close</Button>} />
          </DialogActions>
        </Dialog>
      </DialogRoot>
    </div>
  );
}

Scores

A level is a step on the green ramp: the pill becomes a small score box with tabular figures.

1234

import { Pill } from "@etched/reticle/pill";

export function Scores() {
  return (
    <div className="row">
      <Pill level={1}>1</Pill>
      <Pill level={2}>2</Pill>
      <Pill level={3}>3</Pill>
      <Pill level={4}>4</Pill>
    </div>
  );
}

API reference

PillButton

Prop	Type	Default	Description
tone	"neutral" \| "red" \| "orange" \| "amber" \| "olive" \| "green" \| "teal" \| "cyan" \| "blue" \| "purple"	"neutral"	One of Orbit's tones.
hue	number	–	A hue (0–360) for custom stages, at the tones' lightness and chroma. Wins over `tone`.
level	1 \| 2 \| 3 \| 4	–	A step on the green ramp, for an ordinal score such as conviction 1–4. Wins over `hue` and `tone`. A Pill with a level is a small score box, and a list option with one takes the fill across its row.
render	ReactElement<{ className?: string }>	–	Renders another element with the pill button's look, such as a link: `render={<a href="#role/12" />}`. It gets no `type`.

Pill

Prop	Type	Default	Description
tone	"neutral" \| "red" \| "orange" \| "amber" \| "olive" \| "green" \| "teal" \| "cyan" \| "blue" \| "purple"	"neutral"	One of Orbit's tones.
hue	number	–	A hue (0–360) for custom stages, at the tones' lightness and chroma. Wins over `tone`.
level	1 \| 2 \| 3 \| 4	–	A step on the green ramp, for an ordinal score such as conviction 1–4. Wins over `hue` and `tone`. A Pill with a level is a small score box, and a list option with one takes the fill across its row.