Count badge

TS

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

Hero

TSX

import { CountBadge } from "@fungi.computer/caps/components/count-badge";

export default function Hero() {
  return <CountBadge count={4} label="New spore prints" />;
}

Counts

TSX

import { CountBadge } from "@fungi.computer/caps/components/count-badge";

export default function Counts() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <CountBadge count={0} label="Unread" />
      <CountBadge count={7} label="Baskets" />
      <CountBadge count="99+" label="Patches" />
    </div>
  );
}

Props

CountBadgeProps

Prop	Type	Description
count	ReactNode
tone?	"neutral" | "warning"	Semantic count emphasis; warnings call attention to items needing action.
label?	ReactNode

• countReactNode
• tone?"neutral" | "warning"

  Semantic count emphasis; warnings call attention to items needing action.

• label?ReactNode

Full types: API reference.