Components
Badge
A square surface slot with a corner marker — drop an icon inside and attach a Tag-style label to the top-right corner.
Installation
$npx litefy@latest add badge
$pnpm dlx litefy@latest add badge
$yarn dlx litefy@latest add badge
$bun --bun litefy@latest add badge
Usage
Basic Usage
Badge is a fixed-size surface (a size-12 muted square by default) whose corner marker is rendered through the Tag component — pass label to attach a numeric or text marker at the top-right corner.
3
"use client";
import { Badge } from "@/ui";
export default function BadgeBasicDemo() {
return (
<div className="flex items-center gap-4">
<Badge />
<Badge label={3} />
</div>
);
}
Sizing
The surface shape comes entirely from utilities, so reshape it with className — the marker re-anchors itself automatically:
3
"use client";
import { Bell } from "lucide-react";
import { Badge } from "@/ui";
export default function BadgeSizingDemo() {
return (
<div className="flex items-center gap-8">
<Badge />
<Badge className="size-8 rounded-full" label={3}>
<Bell className="size-5" />
</Badge>
</div>
);
}
Marker coloring
label renders as a Tag — color it the same way, via the label slot:
New
New
"use client";
import { Badge } from "@/ui";
export default function BadgeMarkerColorDemo() {
return (
<div className="flex items-center gap-8">
<Badge label="New" />
<Badge label="New" classNames={{ label: "bg-emerald-600 text-white" }} />
</div>
);
}
Notes
- The marker uses the Tag component internally — when installing via CLI, add both:
litefy add badge tag.
API Reference
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Surface content, typically an icon |
label | React.ReactNode | - | Corner marker content, rendered as a Tag at the top-right |
classNames | { label?: ClassNameValue } | - | Custom class names per slot |
styles | { label?: React.CSSProperties } | - | Custom styles per slot |
className | ClassNameValue | - | Custom class names of the surface |
...props | React.ComponentProps<"div"> | - | Native div props |