Badge

Pick a framework. Both use the same recipe, so the styling matches exactly.

accentauroraneutral

Badge props for React
Prop	Type	Default	Description
tone	"accent" \| "aurora" \| "neutral"	neutral	Color accent.

Also takes className and children. Anything else passes through to the span.

badge.demo.tsx

import { Badge } from "../react/index.js";

export default function BadgeDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge tone="accent">accent</Badge>
      <Badge tone="aurora">aurora</Badge>
      <Badge tone="neutral">neutral</Badge>
    </div>
  );
}

accent aurora neutral

Badge props for Svelte
Prop	Type	Default	Description
tone	"accent" \| "aurora" \| "neutral"	neutral	Color accent.

Also takes class and snippet children. Anything else passes through to the span.

badge.demo.svelte

<script lang="ts">
  import { Badge } from "../svelte/index.js";
</script>

<div class="flex flex-wrap items-center gap-3">
  <Badge tone="accent">accent</Badge>
  <Badge tone="aurora">aurora</Badge>
  <Badge tone="neutral">neutral</Badge>
</div>