Status

TS

import { … } from "@fungi.computer/caps/components/status";

Hero

TSX

import { Status } from "@fungi.computer/caps/components/status";

export default function Hero() {
  return (
    <Status
      glyph="check"
      tone="success"
      appearance="chip"
      label="Spawn run complete"
    />
  );
}

Glyphs

TSX

import {
  Status,
  type StatusGlyph,
} from "@fungi.computer/caps/components/status";

const glyphs: readonly StatusGlyph[] = ["ring", "arc", "check", "cross"];

export default function Glyphs() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      {glyphs.map((glyph) => (
        <Status
          key={glyph}
          glyph={glyph}
          label={glyph}
          tone={glyph === "cross" ? "error" : "neutral"}
        />
      ))}
    </div>
  );
}

Motion

TSX

import { Button } from "@fungi.computer/caps/components/button";
import {
  Status,
  type StatusGlyph,
} from "@fungi.computer/caps/components/status";
import { useState } from "react";

export default function Motion() {
  const [glyph, setGlyph] = useState<StatusGlyph>("ring");
  const run = () => {
    setGlyph("arc");
    window.setTimeout(() => {
      setGlyph("check");
    }, 900);
  };
  return (
    <div className="flex items-center gap-md">
      <Button size="sm" onClick={run}>
        Spawn a culture
      </Button>
      <Status
        glyph={glyph}
        motion={glyph === "arc" ? "pulse" : "none"}
        tone={glyph === "check" ? "success" : "neutral"}
        label="Culture status"
      />
    </div>
  );
}

Props

StatusProps

Prop	Type	Description
label?	ReactNode
glyph?	StatusGlyph
motion?	"none" | "pulse" | "bounce"
tone?	"neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"
size?	"default" | "compact"
appearance?	"plain" | "chip"
progress?	number	For arc: how much is done, 0 to 1. Absent, the arc spins.

• label?ReactNode
• glyph?StatusGlyph
• motion?"none" | "pulse" | "bounce"
• tone?"neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"
• size?"default" | "compact"
• appearance?"plain" | "chip"
• progress?number

  For arc: how much is done, 0 to 1. Absent, the arc spins.

Full types: API reference.