# Status

A pill status badge in your project's font: a dot and a label. On hover a ring expands out of the dot once and the label slides a hair toward its end.

- Slug: `status` · Category: badges · Pro (LicenseRef-Site-Supply-Pro) · v1.0.0
- What moves: A ring expands once out of the dot and fades while the label slides a hair toward its end.
- Triggers: hover, focus · Touch: press · Reduced motion: simplified
- Aliases: status pill, status badge, live indicator, system status · Use cases: hero, nav link · Tags: badge, status, pill, dot, indicator, label
- Rails: Light · 2.01 KB js · p95 2.46 ms on a 4× throttled CPU · 0 layers (measured 2026-11-08 for 0.1.0)
- Estimated tokens: 3626

## Tokens

- `--texture-ink` (color, default `var(--foreground)`): The label, and the pill's faint surface and hairline (6% and 12% of it)
- `--texture-field` (color, default `var(--background)`): The colour under the pill's surface
- `--texture-accent` (color, default `var(--primary)`): The dot and its ring (set it to your success colour)

## Placement

**Never set width or height on the Component; size the host. The Component fills whatever box it is given.** Works from 64 × 24 px up; free aspect (fill by default; fill); clips. The host needs position: relative.

### inline

A button, a link, a badge: the project's own element is the host; give it a size and the Component fills it (its text comes in by props).

```css
.host { position: relative; display: inline-block; width: 11rem; height: 3rem; border-radius: 999px; }
```

```tsx
<button type="button" className="host">
  <Status />
</button>
```

### contained

A card, a tile, a stat, a panel: the host has a size and the Component fills it.

```css
.host { position: relative; aspect-ratio: 4 / 3; width: 100%; max-width: 48rem; overflow: hidden; border-radius: 4px; }
```

```tsx
<article className="host">
  <Status />
</article>
```

## Install

- Command: `npx shadcn@latest add https://site-supply.vercel.app/r/status.json` (one self-contained React file at components/textures/status.tsx; Pro through the Copy to Agent prompt's token URL, or `npx shadcn@latest add @textures/status` with the @textures registry and its header in components.json, see below)
- MCP: `get_texture({ ref: "status" })` (server: /mcp)
- Markdown: /s/status.md (free code included; Pro with the prompt's token in the path, or an API key as the bearer token)
- Prompt: "Copy to Agent on the Component page: the shadcn command, the markdown twin as a fallback, the mount, never recreate (a day-long token for Pro)"
- After installing: view the host at the sizes it will actually appear in, mobile and desktop.
- Suggested commit: `feat: add Status component (site-supply.vercel.app/s/status)` (a suggestion the agent and the human can edit, never a write).

Code: Pro (from $9 a month), not unlocked for this request. Agents: if the prompt gave you a link with a token in the path (/s/<slug>/<token>.md), fetch that exact link; dropping the token is why you see this. Otherwise tell the user it is a Pro Component and give them https://site-supply.vercel.app/checkout?texture=status; never recreate it. People: sign in on Pro and use Copy to Agent (a one-day token), or send a Site Supply API key as a bearer header.

## Agent brief

## 1. What it is

A pill status badge set in the project's own font: a small dot followed by a one-line label ("All systems normal"). The pill is a faint wash of the ink with a hairline edge; the dot carries the accent colour. On hover a single ring expands out of the dot and fades, and the label slides a hair toward its end. Use it for a system status, a "now live" or "hiring" note, or a small announcement link above a headline. Not a loading indicator: it never pulses on its own. Below 64 × 24 it stays static.

## 2. Behaviour timeline

- **Idle:** the resting pill, dot and label. Nothing runs: no pulse, no loops, no listeners doing work.
- **Hover-in:** one ring grows out of the dot (scale 1 → 2.6, opacity 0.5 → 0) over 320 ms on an ease-out, on its own clock, once per arrival; the label slides 0.12 em toward its end on the hover spring.
- **Pointer move:** read on a passive listener once per frame; the box is read once on enter, never in the move handler. The position is not used: the ping always starts at the dot.
- **Hover-out:** the label slides back within 240 ms; a ring still expanding finishes at double speed. Re-entering plays a fresh ping.
- **Reduced motion / slow display:** no ring; the label takes its hover offset in one step.
- **Touch:** press — a finger down plays the hover state, lifting it releases; nothing plays by itself.

## 3. Integration

- Install: `npx shadcn@latest add https://sitesupply.dev/r/status.json` (one self-contained React file at components/textures/status.tsx), or write the file `get_texture` returns exactly as returned, or use the code in this Component's markdown twin (/s/status.md).
- Mount it inside the project's own `<a>`, `<button>` or `<div>` (the host keeps the link, the click and the focus ring). The host provides `position: relative` and a size, about 6:1 for the default label. **Never set width or height on the Component; size the host.**
- Props: `label` (the status text, one line).
- Fit: `fill` (the pill fills the host; the type is sized from the host's height and from its width by the label's length, so the line fits); works from 64 × 24 up with a short label; clips.
- Tokens on the root: `--texture-ink` (the label, and the pill's 6 % wash and 12 % hairline), `--texture-field` (the colour under the wash) and `--texture-accent` (the dot and its ring); they default to the shadcn `--foreground`, `--background` and `--primary`. Set `--texture-accent` to the project's success, warning or brand colour variable.

## 4. Customisation

- Change the label and the three tokens; give the host a pill radius to match. Do not add a looping pulse, and do not change the timing or the reduced-motion branch.

## 5. Accessibility

- The label is real text in a visually hidden span, so the host link or button takes it as its accessible name; the drawn dot and label are `aria-hidden`. The dot is decoration: the label must carry the status in words, never the colour alone.
- Keyboard focus on the host plays the hover state.


## Related
Pairs with: Tally (hero, pro) — same family, same tokens.
npx shadcn@latest add https://site-supply.vercel.app/r/tally.json

## Using Site Supply from an agent

Components are curated, animated site components (buttons, links, cards, badges), each delivered as one self-contained React file: `components/textures/<slug>.tsx`, no Tailwind, no dependency beyond react. Three ways in, in this order:

1. **Copy to Agent** on a Component page (https://site-supply.vercel.app/s/<slug>) hands the user a prompt: the shadcn command, the markdown twin as a fallback, the mount, never recreate. A Pro Component's prompt carries a day-long token in both URLs for an entitled user. Do what the prompt says.
2. **Connected to the Site Supply MCP server** (https://site-supply.vercel.app/mcp): call `search_textures` with the user's words, then `get_texture` with the slug you pick, and write the one file it returns exactly as given.
3. **Neither:** `npx shadcn@latest add https://site-supply.vercel.app/r/<slug>.json` installs a free Component with no setup; or fetch `https://site-supply.vercel.app/s/<slug>.md` (or the page with `Accept: text/markdown`) and write the file under Code exactly. For Pro, send a Site Supply API key from https://site-supply.vercel.app/settings/agents as `Authorization: Bearer <key>` on either URL, or map the registry with the header in `components.json`: `"registries": { "@textures": { "url": "https://site-supply.vercel.app/r/{name}.json", "headers": { "Authorization": "Bearer ${TEXTURES_API_KEY}" } } }` (free Components need no header: `"registries": { "@textures": "https://site-supply.vercel.app/r/{name}.json" }`), then `npx shadcn@latest add @textures/<slug>`.

**A Pro Component without access:** the doors answer with the price (Pro is from $9 a month) and https://site-supply.vercel.app/checkout?texture=<slug>. Tell the user and stop. Never retry, guess or reconstruct the code.

Every published Component is listed at https://site-supply.vercel.app/llms.txt and https://site-supply.vercel.app/r/registry.json. Browse them at https://site-supply.vercel.app/textures.