Binhlaig UI Component

Badge

Displays compact labels, statuses and categories with multiple color variants and sizes.

Installation

Initialize Binhlaig UI and install Badge with your preferred installer.

Initialize first

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add badge

Import Badge from your UI component directory.

import { Badge } from "@/components/ui/badge"

Use Badge to display a compact label.

Default

Choose a semantic color that matches the badge meaning.

DefaultSecondaryOutlineDestructiveSuccessWarningInfoGhost

Badge includes small, default and large sizes.

SmallDefaultLarge

Add a small icon before the badge label.

NewCompletedUpdatedFeatured

Replace an older Badge source with the latest registry version.

npx binhlaig-ui@latest add badge --overwrite

Supported Badge variants and sizes.

Prop	Values	Default
`variant`	default, secondary, outline, destructive, success, warning, info, ghost	`default`
`size`	sm, default, lg	`default`