Badge

TS

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

Variants

TSX

import { Badge } from "@fungi.computer/caps/components/badge";

export default function Variants() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>Neutral</Badge>
      <Badge tone="primary">Fungi</Badge>
      <Badge tone="accent">Foraged</Badge>
      <Badge tone="success">In season</Badge>
      <Badge tone="warning">Rare</Badge>
      <Badge tone="error">Toxic</Badge>
    </div>
  );
}

Sizes

TSX

import { Badge } from "@fungi.computer/caps/components/badge";

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge size="sm">Small</Badge>
      <Badge>Default</Badge>
      <Badge size="lg">Large</Badge>
    </div>
  );
}

Variant

TSX

import { Badge } from "@fungi.computer/caps/components/badge";

export default function Variant() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="solid" tone="primary">
        Solid
      </Badge>
      <Badge variant="quiet" tone="primary">
        Quiet
      </Badge>
    </div>
  );
}

Props

BadgeProps

Prop	Type	Description
size?	"sm" | "default" | "lg"
variant?	"solid" | "quiet"
tone?	"neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"

• size?"sm" | "default" | "lg"
• variant?"solid" | "quiet"
• tone?"neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"

Full types: API reference.