Progress

TS

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

Hero

TSX

import { Progress } from "@fungi.computer/caps/components/progress";

export default function Hero() {
  return (
    <Progress aria-label="Dehydrator run" max={100} value={72} tone="success" />
  );
}

Tones

TSX

import { Progress } from "@fungi.computer/caps/components/progress";

export default function Tones() {
  return (
    <div className="flex w-72 flex-col gap-2">
      <Progress aria-label="Neutral" max={100} value={30} />
      <Progress aria-label="Primary" max={100} value={55} tone="primary" />
      <Progress aria-label="Warning" max={100} value={80} tone="warning" />
      <Progress aria-label="Error" max={100} value={95} tone="error" />
    </div>
  );
}

Game meter

TSX

import { GameMeter } from "@fungi.computer/caps/components/progress";

export default function GameMeterExample() {
  return (
    <div className="grid max-w-sm gap-2">
      <GameMeter label="Spores" value={420} max={500} tone="primary" />
      <GameMeter label="Stamina" value={30} max={100} tone="warning" />
    </div>
  );
}

Props

ProgressProps

Prop	Type	Description
tone?	"neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"

• tone?"neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"

GameMeterProps

Prop	Type	Description
label	string
value	number
max	number
tone?	"neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"

• labelstring
• valuenumber
• maxnumber
• tone?"neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"

Full types: API reference.