## Overview [#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 [#usage]
```tsx
import { Badge } from "@tilt-legal/cubitt-components/primitives";
```
```tsx
Badge
```
Use the `render` prop to render the badge as a different element while preserving badge styling:
```tsx
import { Badge } from "@tilt-legal/cubitt-components/primitives";
import { Link } from "@tanstack/react-router";
}>Badge;
```
## Examples [#examples]
### Variants and Appearances [#variants-and-appearances]
Display badges with different variants in both default and ghost appearances.
```tsx
import { Badge } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
);
}
```
### Disabled [#disabled]
Display badges in a disabled state across all variants and appearances.
```tsx
import { Badge } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
);
}
```
### Sizes [#sizes]
Badges come in four sizes: xs, sm, md (default), and lg.
```tsx
import { Badge } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
Xsmall
Small
Medium
Large
5
5
5
5
);
}
```
### With Icons [#with-icons]
Combine badges with icons for enhanced meaning across all variants and appearances.
```tsx
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 (
Brand Secondary Info Success Accent Caution Warning Destructive
Brand Secondary Info Success Accent Caution Warning Destructive
);
}
```
### With Dot [#with-dot]
Use the `BadgeDot` component to add status indicators across all variants and appearances.
```tsx
import { Badge } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
Brand Secondary Info Success Accent Caution Warning Destructive
Brand Secondary Info Success Accent Caution Warning Destructive
);
}
```
### Dismissible [#dismissible]
Add a `BadgeButton` to make badges dismissible across all variants and appearances.
```tsx
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 (
);
}
```
### Link [#link]
Use the `render` prop to make another component look like a badge.
```tsx
import Link from "next/link";
import { Badge } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
}>
Render prop
);
}
```
***
## API Reference [#api-reference]
### Badge [#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 [#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 [#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"`.