Display

Badge

A short status or count next to what it describes.

import { Badge } from "@flinbu/seed";

Variants and appearances

DraftNewPasses AAReview2 errorscs_204Pro

NeutralAccentLiveFailing

import { Badge } from "@flinbu/seed";
import { Check, GitPullRequest } from "lucide-react";

<div className="flex flex-col gap-sm">
  <div className="flex flex-wrap gap-xs">
    <Badge>Draft</Badge>
    <Badge variant="accent">New</Badge>
    <Badge variant="success" icon={<Check />}>Passes AA</Badge>
    <Badge variant="warning">Review</Badge>
    <Badge variant="error">2 errors</Badge>
    <Badge variant="info" icon={<GitPullRequest />}>cs_204</Badge>
    <Badge variant="offer">Pro</Badge>
  </div>
  <div className="flex flex-wrap gap-xs">
    <Badge appearance="solid">Neutral</Badge>
    <Badge variant="accent" appearance="solid">Accent</Badge>
    <Badge variant="success" appearance="outline" dot>Live</Badge>
    <Badge variant="error" appearance="outline" dot>Failing</Badge>
  </div>
</div>

Use it for

Status, counts, labels like New or Pro.

Use something else for

Actions: use Button.
Color alone: add a word or an icon.

Props

Prop	Type	Default	Description
`variant`	`'neutral' \| 'accent' \| 'error' \| 'success' \| 'warning' \| 'info' \| 'offer'`	`'neutral'`	Meaning.
`appearance`	`'soft' \| 'solid' \| 'outline'`	`'soft'`	Weight.
`icon`	`IconProp`	`none`	Small leading icon. An element like <Search /> (works in server components) or, in client components, the component itself.
`dot`	`boolean`	`none`	A leading dot in the text color.
`className`	`string`	`none`	Extra classes. They win over Seed's, so you can adjust one thing without forking.

Accessibility

Plain text, read in place. dot is decorative.