{Object.entries(STAGES).map(([k, c]) => (
{k}
))}
Closed won
Closed lost
Draft
Trial
Past due
Payment failed
Paid
);
}
```
## Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| `tone` | `keyof typeof tones \| "ended"` | `"neutral"` | |
| `color` | `string` | | An app's own state colour; wins over tone. |
Full docs: https://notchset.dev/components/status-pill
## Customising
- Colours: every part reads the foundation's roles (`--ns-canvas`, `--ns-ink`, `--ns-line`, `--ns-signal` …), which read your shadcn tokens (`--background`, `--foreground`, `--border`, `--destructive` …), plus the optional `--success` and `--warning`. Retheme on `:root` or any container; never add Tailwind colour classes inside the component.
- Dark mode follows the `.dark` class or `data-theme="dark"` on an ancestor (the shadcn and next-themes conventions).
- Update later: Commit or stash local changes first (or copy the files), so the update can be undone. Read https://notchset.dev/r/changelog.json for the new versions: a major version, an entry marked breaking or a merge says what to change. Then re-run the install with `--overwrite`, on a branch. It replaces the component's files, the shared helper files they import, and the item's CSS rules in the global stylesheet, so review the whole diff (components, shared files, CSS), re-apply your own edits, and run the app's typecheck, tests and build.
## Accessibility contract (preserve when editing)
## Install
```bash
npx shadcn@latest add https://notchset.dev/r/status-pill.json
```
Or add the `@notchset` registry to components.json and run `npx shadcn@latest add @notchset/status-pill`. Every components.json style gets the same files.
## Continue the workflow
- [Board](https://notchset.dev/blocks/board)
- [Deal card](https://notchset.dev/blocks/deal-card)
- [Stage path](https://notchset.dev/components/stage-path)
## Source
### components/ui/notchset/status-pill.tsx
```tsx
// Notchset status-pill 2.0.0 · https://notchset.dev/changelog
import * as React from "react";
import { cn } from "@/lib/utils";
/*
* Status pill: a record's state in its own colour, as a word. `tone` covers the states every app shares;
* `color` takes an app's own state colour (a pipeline stage). "Closed" states that are over (lost, cancelled)
* use tone="ended": no colour, just an outline, so they recede.
* Every state is the same chip: a 6px dot in its colour and a word. A tint means "look here": only warn and bad
* (needs approval, overdue, denied) are tinted, so a column of them reads calm and the exception stands out. A pill
* that leads with its own icon skips the dot.
*/
const tones = {
neutral: "var(--ns-ink-3)",
ok: "var(--ns-ok)",
warn: "var(--ns-warn)",
bad: "var(--ns-bad)",
signal: "var(--ns-signal)",
} as const;
type StatusPillProps = React.ComponentPropsWithoutRef<"span"> & {
tone?: keyof typeof tones | "ended" | undefined;
/** An app's own state colour; wins over tone. */
color?: string | undefined;
};
function StatusPill({ tone = "neutral", color, className, style, ...props }: StatusPillProps) {
const ended = tone === "ended" && !color;
const loud = !color && (tone === "warn" || tone === "bad");
return (