Primitives

Badge

A small status pill. Count, dot, or label.

data-scope="badge"

Usage

import { Badge } from "@crosskit-ui/react";

<Badge variant="success">Active</Badge>
<script setup lang="ts">
import { Badge } from "@crosskit-ui/vue";
</script>

<template>
  <Badge variant="success">Active</Badge>
</template>
<script lang="ts">
  import { Badge } from "@crosskit-ui/svelte";
</script>

<Badge variant="success">Active</Badge>
import { CkBadge } from "@crosskit-ui/angular";

@Component({
  imports: [CkBadge],
  template: `<span ckBadge variant="success">Active</span>`,
})
export class Demo {}

Props

PropTypeDefaultNotes
variant"primary" | "secondary" | "success" | "warning" | "error" | "info""primary"Colour.
size"sm" | "md" | "lg""md"Badge size.
roundedbooleanfalseFully rounded pill.
outlinedbooleanfalseOutline instead of a fill.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.