Badge

Overview

The Badge component displays small status indicators, labels, or counts with support for different variants and appearances. It can be used polymorphically with the render prop for flexible implementations.

Usage

import { Badge } from "@tilt-legal/cubitt-components/primitives";

<Badge variant="brand">Badge</Badge>

Use the render prop to render the badge as a different element while preserving badge styling:

import { Badge } from "@tilt-legal/cubitt-components/primitives";
import { Link } from "@tanstack/react-router";

<Badge render={<Link href="/home" />}>Badge</Badge>;

Examples

Variants and Appearances

Display badges with different variants in both default and ghost appearances.

import { Badge } from "@tilt-legal/cubitt-components/primitives";

export default function Component() {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center gap-4">
        <Badge variant="brand">Brand</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="info">Info</Badge>
        <Badge variant="success">Success</Badge>
        <Badge variant="accent">Accent</Badge>
        <Badge variant="caution">Caution</Badge>
        <Badge variant="warning">Warning</Badge>
        <Badge variant="destructive">Destructive</Badge>
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Badge variant="brand" appearance="ghost">Brand</Badge>
        <Badge variant="secondary" appearance="ghost">Secondary</Badge>
        <Badge variant="info" appearance="ghost">Info</Badge>
        <Badge variant="success" appearance="ghost">Success</Badge>
        <Badge variant="accent" appearance="ghost">Accent</Badge>
        <Badge variant="caution" appearance="ghost">Caution</Badge>
        <Badge variant="warning" appearance="ghost">Warning</Badge>
        <Badge variant="destructive" appearance="ghost">Destructive</Badge>
      </div>
    </div>
  );
}

Disabled

Display badges in a disabled state across all variants and appearances.

import { Badge } from "@tilt-legal/cubitt-components/primitives";

export default function Component() {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center gap-4">
        <Badge variant="brand" disabled>Brand</Badge>
        <Badge variant="secondary" disabled>Secondary</Badge>
        <Badge variant="info" disabled>Info</Badge>
        <Badge variant="success" disabled>Success</Badge>
        <Badge variant="accent" disabled>Accent</Badge>
        <Badge variant="caution" disabled>Caution</Badge>
        <Badge variant="warning" disabled>Warning</Badge>
        <Badge variant="destructive" disabled>Destructive</Badge>
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Badge variant="brand" appearance="ghost" disabled>Brand</Badge>
        <Badge variant="secondary" appearance="ghost" disabled>Secondary</Badge>
        <Badge variant="info" appearance="ghost" disabled>Info</Badge>
        <Badge variant="success" appearance="ghost" disabled>Success</Badge>
        <Badge variant="accent" appearance="ghost" disabled>Accent</Badge>
        <Badge variant="caution" appearance="ghost" disabled>Caution</Badge>
        <Badge variant="warning" appearance="ghost" disabled>Warning</Badge>
        <Badge variant="destructive" appearance="ghost" disabled>Destructive</Badge>
      </div>
    </div>
  );
}

Sizes

Badges come in four sizes: xs, sm, md (default), and lg.

import { Badge } from "@tilt-legal/cubitt-components/primitives";

export default function Component() {
  return (
    <div className="flex flex-col items-center justify-center gap-6">
      <div className="flex items-center gap-4">
        <Badge variant="brand" size="xs">
          Xsmall
        </Badge>
        <Badge variant="brand" size="sm">
          Small
        </Badge>
        <Badge variant="brand">
          Medium
        </Badge>
        <Badge variant="brand" size="lg">
          Large
        </Badge>
      </div>
      <div className="flex items-center gap-4">
        <Badge variant="brand" size="xs">
          5
        </Badge>
        <Badge variant="brand" size="sm">
          5
        </Badge>
        <Badge variant="brand">
          5
        </Badge>
        <Badge variant="brand" size="lg">
          5
        </Badge>
      </div>
    </div>
  );
}

With Icons

Combine badges with icons for enhanced meaning across all variants and appearances.

import { Badge } from "@tilt-legal/cubitt-components/primitives";
import { BadgeDot } from "@tilt-legal/cubitt-components/primitives";
import {
  Tag } from "@tilt-legal/cubitt-icons/ui/outline";

export default function Component() {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center gap-4">
        <Badge variant="brand"><Tag /> Brand</Badge>
        <Badge variant="secondary"><Tag /> Secondary</Badge>
        <Badge variant="info"><Tag /> Info</Badge>
        <Badge variant="success"><Tag /> Success</Badge>
        <Badge variant="accent"><Tag /> Accent</Badge>
        <Badge variant="caution"><Tag /> Caution</Badge>
        <Badge variant="warning"><Tag /> Warning</Badge>
        <Badge variant="destructive"><Tag /> Destructive</Badge>
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Badge variant="brand" appearance="ghost"><Tag /> Brand</Badge>
        <Badge variant="secondary" appearance="ghost"><Tag /> Secondary</Badge>
        <Badge variant="info" appearance="ghost"><Tag /> Info</Badge>
        <Badge variant="success" appearance="ghost"><Tag /> Success</Badge>
        <Badge variant="accent" appearance="ghost"><Tag /> Accent</Badge>
        <Badge variant="caution" appearance="ghost"><Tag /> Caution</Badge>
        <Badge variant="warning" appearance="ghost"><Tag /> Warning</Badge>
        <Badge variant="destructive" appearance="ghost"><Tag /> Destructive</Badge>
      </div>
    </div>
  );
}

With Dot

Use the BadgeDot component to add status indicators across all variants and appearances.

import { Badge } from "@tilt-legal/cubitt-components/primitives";

export default function Component() {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center gap-4">
        <Badge variant="brand"><BadgeDot pulse /> Brand</Badge>
        <Badge variant="secondary"><BadgeDot /> Secondary</Badge>
        <Badge variant="info"><BadgeDot /> Info</Badge>
        <Badge variant="success"><BadgeDot pulse /> Success</Badge>
        <Badge variant="accent"><BadgeDot /> Accent</Badge>
        <Badge variant="caution"><BadgeDot /> Caution</Badge>
        <Badge variant="warning"><BadgeDot pulse /> Warning</Badge>
        <Badge variant="destructive"><BadgeDot /> Destructive</Badge>
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Badge variant="brand" appearance="ghost"><BadgeDot /> Brand</Badge>
        <Badge variant="secondary" appearance="ghost"><BadgeDot pulse /> Secondary</Badge>
        <Badge variant="info" appearance="ghost"><BadgeDot pulse /> Info</Badge>
        <Badge variant="success" appearance="ghost"><BadgeDot /> Success</Badge>
        <Badge variant="accent" appearance="ghost"><BadgeDot /> Accent</Badge>
        <Badge variant="caution" appearance="ghost"><BadgeDot pulse /> Caution</Badge>
        <Badge variant="warning" appearance="ghost"><BadgeDot /> Warning</Badge>
        <Badge variant="destructive" appearance="ghost"><BadgeDot /> Destructive</Badge>
      </div>
    </div>
  );
}

Dismissible

Add a BadgeButton to make badges dismissible across all variants and appearances.

import { Badge, BadgeButton } from "@tilt-legal/cubitt-components/primitives";
import { BadgeDot } from "@tilt-legal/cubitt-components/primitives";
import {
  Xmark } from "@tilt-legal/cubitt-icons/ui/outline";

export default function Component() {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center gap-4">
        <Badge variant="brand">Brand<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="secondary">Secondary<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="info">Info<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="success">Success<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="accent">Accent<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="caution">Caution<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="warning">Warning<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="destructive">Destructive<BadgeButton><Xmark /></BadgeButton></Badge>
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Badge variant="brand" appearance="ghost">Brand<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="secondary" appearance="ghost">Secondary<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="info" appearance="ghost">Info<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="success" appearance="ghost">Success<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="accent" appearance="ghost">Accent<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="caution" appearance="ghost">Caution<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="warning" appearance="ghost">Warning<BadgeButton><Xmark /></BadgeButton></Badge>
        <Badge variant="destructive" appearance="ghost">Destructive<BadgeButton><Xmark /></BadgeButton></Badge>
      </div>
    </div>
  );
}

Link

Use the render prop to make another component look like a badge.

import Link from "next/link";
import { Badge } from "@tilt-legal/cubitt-components/primitives";

export default function Component() {
  return (
    <Badge render={<Link href="#" />}>
      <BadgeDot className="bg-primary" />
      Render prop
    </Badge>
  );
}

API Reference

Badge

The root badge component. Extends all HTML span element props.

Prop	Type	Default	Description
`variant`	`"brand"` \| `"secondary"` \| `"info"` \| `"success"` \| `"accent"` \| `"caution"` \| `"warning"` \| `"destructive"`	`"brand"`	The semantic variant of the badge
`appearance`	`"default"` \| `"outline"` \| `"ghost"`	`"default"`	The visual appearance style
`size`	`"xs"` \| `"sm"` \| `"md"` \| `"lg"`	`"md"`	The size of the badge
`disabled`	`boolean`	`false`	Whether the badge is disabled (applies opacity and pointer-events)
`render`	`ReactElement`	-	Custom element to render as the badge
`dotClassName`	`string`	-	Additional CSS classes for dot elements
`className`	`string`	-	Additional CSS classes to apply to the badge

BadgeDot

A small colored dot indicator, typically used to show status. Extends all HTML span element props.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the dot

The component renders a span with data-slot="badge-dot" and accepts all standard HTML span attributes.

BadgeButton

A button element for dismissible badges. Extends all HTML button element props.

Prop	Type	Default	Description
`variant`	`"default"`	`"default"`	The button variant (currently only default)
`render`	`ReactElement`	-	Custom element to render as the button
`children`	`React.ReactNode`	-	Button content (typically an X icon)
`className`	`string`	-	Additional CSS classes for the button

The component renders with role="button" and data-slot="badge-button".

Badge

Polymorphic Rendering

On this page