# Status

A colored dot followed by a label.

Source: [status.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/status.tsx)

```tsx
import { Status } from "@/components/ui/status";

export default function StatusVariants() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Status variant="neutral">Draft</Status>
      <Status variant="success">Operational</Status>
      <Status variant="warning">Degraded</Status>
      <Status variant="destructive">Outage</Status>
      <Status variant="info">In review</Status>
    </div>
  );
}
```

## Installation

Add the registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

```bash
npx shadcn@latest add @jarvis/status
```

## Usage

```tsx
import { Status } from "@/components/ui/status";

export function ServiceStatus() {
  return <Status variant="success">Operational</Status>;
}
```

Always include a label, since color alone doesn't say what the status is.

## Examples

### Monospace

Add `font-mono` for codes, such as HTTP statuses.

```tsx
import { Status } from "@/components/ui/status";

export default function StatusMonospace() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Status variant="success" className="font-mono">
        200 OK
      </Status>
      <Status variant="warning" className="font-mono">
        429
      </Status>
      <Status variant="destructive" className="font-mono">
        500
      </Status>
    </div>
  );
}
```

### In a list

Give the status a fixed width so the columns beside it line up.

```tsx
import { Status } from "@/components/ui/status";

const deployments = [
  { name: "website-redesign", status: "Ready", variant: "success", time: "2m ago" },
  { name: "mobile-app", status: "Building", variant: "info", time: "Just now" },
  { name: "docs", status: "Queued", variant: "neutral", time: "5m ago" },
  { name: "billing-service", status: "Degraded", variant: "warning", time: "1h ago" },
  { name: "search-index", status: "Failed", variant: "destructive", time: "3h ago" },
] as const;

export default function StatusList() {
  return (
    <div className="flex w-full max-w-md flex-col">
      {deployments.map((deployment) => (
        <div
          key={deployment.name}
          className="flex h-9 items-center gap-3 border-b border-border-muted last:border-b-0"
        >
          <span className="flex-1 truncate font-mono text-sm">{deployment.name}</span>
          <Status variant={deployment.variant} className="w-24">
            {deployment.status}
          </Status>
          <span className="w-16 text-right text-xs text-faint">{deployment.time}</span>
        </div>
      ))}
    </div>
  );
}
```

## Props

| Part | Extends |
| --- | --- |
| `Status` | `<span>` |

### Status

| Prop       | Type                                                             | Description          |
| ---------- | ---------------------------------------------------------------- | -------------------- |
| `variant?` | `"destructive" \| "info" \| "neutral" \| "success" \| "warning"` | Default: `"neutral"` |