Badge

Visual indicators for numeric values such as tallies and scores.

Import

tsx
import { Badge } from "@kobalte/pigment";

tsx
import { Badge } from "@kobalte/pigment";

Basic usage

tsx
<Badge>v1.0.0</Badge>

tsx
<Badge>v1.0.0</Badge>

Customization

Variants

The Badge component comes in four variants: solid, soft (default), inverted and dot.

tsx
<Badge variant="solid">Solid</Badge>
<Badge variant="soft">Soft</Badge>
<Badge variant="dot">Dot</Badge>

tsx
<Badge variant="solid">Solid</Badge>
<Badge variant="soft">Soft</Badge>
<Badge variant="dot">Dot</Badge>

The inverted variant can be used to create a high contrast badge on a vibrant surface of the same color|status.

tsx
<Button
  variant="solid"
  color="primary"
  leadingIcon={<TablerTagIcon />}
  trailingIcon={
    <Badge variant="inverted" color="primary" class="flex">
      12
    </Badge>
  }
>
  Labels
</Button>

tsx
<Button
  variant="solid"
  color="primary"
  leadingIcon={<TablerTagIcon />}
  trailingIcon={
    <Badge variant="inverted" color="primary" class="flex">
      12
    </Badge>
  }
>
  Labels
</Button>

Colors

Badges supports all Pigment semantic colors: primary, success, info (default), warning, danger and discovery.

tsx
<For each={["solid", "soft", "inverted", "dot"]}>
  {variant => (
    <div class="flex items-center gap-3">
      <For each={["primary", "success", "info", "warning", "danger", "discovery"]}>
        {color => (
          <Badge variant={variant} color={color} class="capitalize">
            {color}
          </Badge>
        )}
      </For>
    </div>
  )}
</For>

tsx
<For each={["solid", "soft", "inverted", "dot"]}>
  {variant => (
    <div class="flex items-center gap-3">
      <For each={["primary", "success", "info", "warning", "danger", "discovery"]}>
        {color => (
          <Badge variant={variant} color={color} class="capitalize">
            {color}
          </Badge>
        )}
      </For>
    </div>
  )}
</For>

Sizes

The Badge component comes in two sizes: md (default) and lg.

tsx
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

tsx
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

Shapes

Badges supports three different shapes: rounded (default), pill and circle.

tsx
<Badge shape="rounded">+100</Badge>
<Badge shape="pill">12</Badge>
<Badge shape="circle">1</Badge>

tsx
<Badge shape="rounded">+100</Badge>
<Badge shape="pill">12</Badge>
<Badge shape="circle">1</Badge>

API Reference

Component identifier

The name Badge can be used when providing default props and slot classes in the theme.

Props

Slots