CONTOUR // NEXTUI
Badge
Topographic badge with neon, cream, warning, error, and info variants. Monospace labels on dark surfaces.
$
Or install the base component for free:
Live Preview
Open full demoUsage
TSX
<Badge variant="neon">Active</Badge>Variants
<Badge variant="neon">Active</Badge>
<Badge variant="cream">Default</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="info">Beta</Badge>
Source
TSX
import { cn } from '@/lib/utils'
type BadgeVariant = 'neon' | 'cream' | 'warning' | 'error' | 'info'
interface BadgeProps {
children: React.ReactNode
variant?: BadgeVariant
className?: string
}
const VARIANT_CLASS: Record<BadgeVariant, string> = {
neon: 'badge--neon',
cream: 'badge--cream',
warning: 'badge--warning',
error: 'badge--error',
info: 'badge--info',
}
export function Badge({
children,
variant = 'neon',
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 CONTOUR // NEXT
Button
Dark topographic button with primary, secondary, and ghost variants in three sizes. Neon green accent on midnight navy. Renders as a Next.js Link when an href is provided.
Text
Polymorphic text component with body, caption, label, and code variants. IBM Plex Mono for labels and code, Space Grotesk for body.
Card
Data card with icon, tag badge, title, and description. Supports wide variant for featured layouts. Midnight navy surface with neon green accents.