Badge

Data Display

A compact status or count label in solid tonal colors.

Live preview

NeutralPrimarySuccessWarningDangerInfoSolidOutline

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { Badge } from "@nphuonha/ui-kit";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<Badge>Neutral</Badge>
<Badge variant="success">Active</Badge>
<Badge variant="danger">Failed</Badge>

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
variant	"neutral" \| "primary" \| "success" \| "warning" \| "danger" \| "info" \| "solid" \| "outline"	"neutral"	Tone of the badge.