Status Badge

1import { StatusBadge } from "@/registry/ui";
2
3export function StatusBadgeLiveExample() {
4  return (
5    <div className="flex flex-wrap items-center justify-center gap-2">
6      <StatusBadge status="online" dot>
7        API healthy
8      </StatusBadge>
9      <StatusBadge status="offline" dot variant="outline">
10        Worker offline
11      </StatusBadge>
12      <StatusBadge status="online" size="sm" variant="solid">
13        Live
14      </StatusBadge>
15    </div>
16  );
17}

1import { StatusBadge } from "@/registry/ui";
2
3export function StatusBadgeLoadingExample() {
4  return (
5    <div className="flex flex-wrap items-center justify-center gap-2">
6      <StatusBadge status="deploying" loading>
7        Deploying v2.4.1
8      </StatusBadge>
9      <StatusBadge status="info" loading variant="outline">
10        Syncing
11      </StatusBadge>
12      <StatusBadge status="deploying" dot pulse>
13        Rolling update
14      </StatusBadge>
15    </div>
16  );
17}

1import { StatusBadge } from "@/registry/ui";
2
3export function StatusBadgeMetaExample() {
4  return (
5    <div className="flex flex-col items-center gap-3">
6      <StatusBadge status="success" meta="12ms">
7        Database
8      </StatusBadge>
9      <StatusBadge status="warning" meta="2m ago" variant="outline">
10        Cache stale
11      </StatusBadge>
12      <StatusBadge status="error" meta="503" size="sm">
13        Gateway
14      </StatusBadge>
15    </div>
16  );
17}

1"use client";
2
3import { useState } from "react";
4import { StatusBadge } from "@/registry/ui";
5
6export function StatusBadgeInteractiveExample() {
7  const [tags, setTags] = useState(["Production", "EU-West", "Paid plan"]);
8  const [active, setActive] = useState("Production");
9
10  return (
11    <div className="flex max-w-md flex-col items-center gap-3">
12      <div className="flex flex-wrap justify-center gap-2">
13        {tags.map((tag) => (
14          <StatusBadge
15            key={tag}
16            status={active === tag ? "info" : "neutral"}
17            selectable
18            selected={active === tag}
19            removable
20            variant={active === tag ? "solid" : "soft"}
21            onClick={() => setActive(tag)}
22            onRemove={() => {
23              setTags((current) => {
24                const next = current.filter((t) => t !== tag);
25                setActive((prev) => (prev === tag ? next[0] ?? "" : prev));
26                return next;
27              });
28            }}
29          >
30            {tag}
31          </StatusBadge>
32        ))}
33      </div>
34      <p className="text-center text-xs text-muted-foreground">
35        Click to select · dismiss to remove
36      </p>
37    </div>
38  );
39}