Badge

Small count and labeling component.

Installation

Add this component to your project using the npui CLI:

npx npui add badge

A standard badge for general tagging or categorization.

New

Code for Default Badge

1import { Badge } from "@/components/ui/badge";
2
3export function DefaultBadge() {
4  return <Badge>New</Badge>;
5}

A less prominent badge for secondary information.

Beta

Code for Secondary Badge

1import { Badge } from "@/components/ui/badge";
2
3export function SecondaryBadge() {
4  return <Badge variant="secondary">Beta</Badge>;
5}

A badge indicating a warning or error state.

Error

Code for Destructive Badge

1import { Badge } from "@/components/ui/badge";
2
3export function DestructiveBadge() {
4  return <Badge variant="destructive">Error</Badge>;
5}

A badge with an outline, often used for alternative styling.

Draft

Code for Outline Badge

1import { Badge } from "@/components/ui/badge";
2
3export function OutlineBadge() {
4  return <Badge variant="outline">Draft</Badge>;
5}

These are the available props for the Badge component:

Prop	Type	Description	Default
variant	"default" \| "secondary" \| "destructive" \| "outline"	The visual style of the badge.	"default"
children	React.ReactNode	The content of the badge.	-