LAB // NEXTUI
Badge
Lab-aesthetic badge with green and blue pill variants for experiment tags and status markers.
$
Or install the base component for free:
Live Preview
Open full demoUsage
TSX
<Badge variant="green">Active</Badge>Variants
<Badge variant="green">Active</Badge>
<Badge variant="blue">Pending</Badge>
Source
TSX
import { cn } from '@/lib/utils'
type BadgeVariant = 'blue' | 'green'
interface BadgeProps {
children: React.ReactNode
variant?: BadgeVariant
className?: string
}
const VARIANT_CLASS: Record<BadgeVariant, string> = {
blue: 'badge--blue',
green: 'badge--green',
}
export function Badge({
children,
variant = 'blue',
className,
}: BadgeProps): React.JSX.Element {
return (
<span className={cn('badge', VARIANT_CLASS[variant], className)}>
{children}
</span>
)
}
Works withNext.js 15React 19Tailwind v4TypeScript 5
More from LAB // NEXT
Button
Scientific dark-theme button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Card
Feature card with an experiment code label, SVG icon (atom, grid, diamond, network, monitor, warning), description, and a colored pill tag.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the LAB dark scientific palette.