Badge

One recipe, two bindings — rendered side by side from the same source the package ships.

React

accentauroraneutral

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>
  );
}

Svelte

accent aurora neutral

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>