Components
Badge
A square surface slot with a corner marker — drop an icon inside and attach a 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
Badge is a fixed-size surface (a size-12 muted square by default) whose corner marker is a standalone overlay span — 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 marker — 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-success text-primary-foreground" }} />
</div>
);
}
API Reference
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Surface content, typically an icon |
label | React.ReactNode | - | Corner marker content, rendered as an overlay 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 |