Badge

Measured from Attio — heights 16/20/22px, radii r6/r7, weight 500.

Installation

bun add crisp

import "crisp/styles.css";
import { Badge } from "crisp";

Usage

import { Badge } from "crisp";

export function Example() {
  return <Badge tone="brand">In progress</Badge>;
}

Props

Prop	Type	Default	Description
`tone`	`"neutral" \| "brand" \| "success" \| "warning" \| "danger"`	`"neutral"`	Sets the badge's color role.
`size`	`"small" \| "medium" \| "large"`	`"medium"`	Sets height, padding, and font size — 16 / 20 / 22px.
`variant`	`"soft" \| "solid"`	`"soft"`	`"soft"` uses a tinted fill and tinted ring; `"solid"` uses a solid fill.
`asChild`	`boolean`	`false`	Renders the passed child element instead of a `<span>`.

Examples

Tones

All five tones in the default soft variant.

NeutralBrandSuccessWarningDanger

<Badge tone="neutral">Neutral</Badge>
<Badge tone="brand">Brand</Badge>
<Badge tone="success">Success</Badge>
<Badge tone="warning">Warning</Badge>
<Badge tone="danger">Danger</Badge>

Status dot

Pass dot for a leading status dot in the tone colour — Attio's "Enabled/Paused" status pills.

EnabledPausedFailedDraft

<Badge tone="success" dot>Enabled</Badge>
<Badge tone="warning" dot>Paused</Badge>

Solid

variant="solid" pairs each tone with a matching compound class (badge--compound_0…4) that the Badge component applies automatically.

BrandSuccessWarningDangerNeutral

<Badge tone="brand" variant="solid">Brand</Badge>
<Badge tone="success" variant="solid">Success</Badge>
<Badge tone="warning" variant="solid">Warning</Badge>
<Badge tone="danger" variant="solid">Danger</Badge>
<Badge tone="neutral" variant="solid">Neutral</Badge>

Sizes

Three sizes — small (16px), medium (20px), large (22px).

SmallMediumLarge

<Badge tone="brand" size="small">Small</Badge>
<Badge tone="brand" size="medium">Medium</Badge>
<Badge tone="brand" size="large">Large</Badge>

With icon

The badge's gap: 4px spaces a leading icon from the label.

Verified

<Badge tone="success">
  <CheckIcon />
  Verified
</Badge>

Badge renders a plain, non-interactive <span> — it is never focusable and carries no implicit ARIA role. If the badge conveys state that matters to a screen reader user (e.g. "3 unread"), make sure that meaning is also present in the surrounding text; do not rely on tone color alone to communicate status.

Preview