BadgeGroup

Flush strip of badges with one shared surface and hairline dividers between segments — the nav cluster as a component.

Usage

svelte

<script lang="ts">
  import { Badge, BadgeGroup } from "@milandekruijf/ui/svelte";
</script>

<BadgeGroup>
  <Badge>Svelte</Badge>
  <Badge>TypeScript</Badge>
  <Badge>+3</Badge>
</BadgeGroup>

<!-- Dense sets (filters, tags) wrap onto multiple lines. -->
<BadgeGroup wrap>
  {#each tags as tag (tag)}
    <Badge>{tag}</Badge>
  {/each}
</BadgeGroup>

Examples

Strips and wrapping

svelte

typescript

panda css

topics

languages

sort

svelte

typescript

panda css

radix

gsap

vite

vitest

shiki

<script lang="ts">
  import { Badge, BadgeGroup } from "@milandekruijf/ui/svelte";
  import { row, stack } from "./styles.js";

  const tags = [
    "svelte",
    "typescript",
    "panda css",
    "radix",
    "gsap",
    "vite",
    "vitest",
    "shiki",
  ];
</script>

<div class={stack}>
  <div class={row}>
    <BadgeGroup>
      <Badge>svelte</Badge>
      <Badge>typescript</Badge>
      <Badge>panda css</Badge>
      <Badge>+3</Badge>
    </BadgeGroup>
  </div>
  <div class={row}>
    <BadgeGroup>
      <Badge contrast="selected">topics</Badge>
      <Badge>languages</Badge>
      <Badge>sort</Badge>
    </BadgeGroup>
  </div>
  <div class={row}>
    <BadgeGroup wrap>
      {#each tags as tag (tag)}
        <Badge>{tag}</Badge>
      {/each}
    </BadgeGroup>
  </div>
</div>

Props

Prop	Type	Default	Description
wrap?	`boolean`	false	Allows dense groups (e.g. filter chips) to break onto multiple lines.
rootRef?	`HTMLDivElement \| null`	—	Bindable handle to the root element (`bind:rootRef`), e.g. to measure or animate the strip.
class?	`string`	—	Extra classes merged after the recipe classes.
children	`Snippet`	—	Badges, or links/buttons that wrap a badge, rendered as flush segments.