Badge

Status and count chip with a dot, icons and an optional remove button.

Source: 1 file
Dependencies: none
Playground: yes

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

01Variant

DefaultSecondaryOutlineDestructiveSuccessWarningInfo

<Badge variant="default | secondary | …" />

02Appearance

SolidSoftOutlineSoft dangerOutline info

<Badge appearance="solid | soft | outline" />

03Size

SmallMediumLarge

<Badge size="sm | md | lg" />

04Rounded

SmMdLgFull

<Badge rounded="sm | md | lg | full" />

05Dot & icon

OnlineAwayBusyVerifiedDetails

<Badge dot /> · <Badge startIcon={…} />

06Count

89920+3

<Badge className="min-w-5 justify-center px-1" />

07Removable

DesignEngineeringMarketing

<Badge onRemove={() => …} />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Badge } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

badge-example.tsx

import { Badge } from "kipui";

<Badge variant="success" appearance="soft" dot>
  Active
</Badge>

`onRemove` turns the badge into a chip with a real button — give it `removeLabel` when the text alone isn't a good accessible name.

Playground

Change the props and the snippet underneath updates with them.

Preview

Active

Props

variantsuccess

appearancesoft

sizemd

roundeddefault

dot

<Badge
  variant="success"
  appearance="soft"
  size="md"
  rounded="default"
  dot
>
  Active
</Badge>

API reference

Transcribed from the component's own types. Props with no default are required.

Prop	Default	Description
variant"default" \| "secondary" \| "outline" \| "success" \| "warning" \| "destructive" \| "info"	"default"	Semantic colour.
appearance"solid" \| "soft" \| "outline"	"solid"	Surface treatment.
size"sm" \| "md" \| "lg"	"md"	Height and type scale.
rounded"default" \| "full" \| "none"	"default"	Corner radius.
dotboolean	false	Leading status dot in the variant colour.
startIconReactNode	required	Leading icon.
endIconReactNode	required	Trailing icon.
onRemove() => void	required	Renders a remove button and calls back on click.
removeLabelstring	required	Accessible label for the remove button.