Badge

Square status and metadata chip with filled/outline variants, contrast levels, and a light mode.

Usage

svelte

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

<Badge variant="filled" contrast="high">New</Badge>
<Badge contrast="selected">Slate</Badge>

<BadgeGroup>
  <Badge>Svelte</Badge>
  <Badge contrast="selected">TypeScript</Badge>
  <Badge>+3</Badge>
</BadgeGroup>

Examples

Variants and modes

outline · medium

filled · high

selected

light

filled · medium

svelte

typescript

panda css

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

<div class={stack}>
  <div class={row}>
    <Badge>outline · medium</Badge>
    <Badge variant="filled" contrast="high">filled · high</Badge>
    <Badge contrast="selected">selected</Badge>
  </div>
  <div class={row}>
    <Badge mode="light">light</Badge>
    <Badge variant="filled" contrast="medium">filled · medium</Badge>
  </div>
  <div class={row}>
    <BadgeGroup>
      <Badge>svelte</Badge>
      <Badge contrast="selected">typescript</Badge>
      <Badge>panda css</Badge>
      <Badge>+3</Badge>
    </BadgeGroup>
  </div>
</div>

Props

Prop	Type	Default	Description
variant?	`"outline" \| "filled"`	"outline"	Outline keeps a hairline border; filled uses a solid surface.
contrast?	`"low" \| "medium" \| "high" \| "selected"`	"medium"	Surface/text contrast pair. `selected` is the solid slate.12 segment used for filter chips.
mode?	`"auto" \| "light"`	"auto"	`auto` follows the theme; `light` pins to the light slate scale.
children	`Snippet`	—	Badge label: short status or metadata text.