Badge

useBadge(options) creates a <span class="badge">; badgeClass(options) returns the classes for SSR markup.

Variants

import { useBadge } from "@katanakit/ui";

row.append(
  useBadge({ label: "Draft" }),
  useBadge({ label: "Info", variant: "info" }),
  useBadge({ label: "Paid", variant: "success" }),
  useBadge({ label: "Pending", variant: "warning" }),
  useBadge({ label: "Failed", variant: "danger" }),
);

Contract

Every component in the kit follows one shape. Pure builders return a class string and touch nothing; factories build a DOM element and need a browser.

Surface	Import	Needs a DOM
Pure class builder	badgeClass	No — safe during SSR
Element factory	useBadge	Yes — throws with a pointer to the pure surface

// Server and templates — pure
<div class={ badgeClass({ /* … */ }) }></div>

// Browser — imperative
document.body.append(useBadge({ /* … */ }));

Class names are unprefixed. The root class is badge, not kk-badge, and every component rule is wrapped in @layer katana.

That matters because these names collide 1:1 with daisyUI. Unlayered CSS always beats layered CSS regardless of specificity or import order, so loading both is deterministic instead of "whoever came last". See why.

Options

Option	Type	Default	Notes
label	string	""	Badge text.
variant	"neutral" | "info" | "success" | "warning" | "danger"	"neutral"	Semantic color.

Dark mode

Variants use KatanaKit palette tokens, so they invert automatically with data-theme="dark" (toggle the site theme to see it).