CONTOUR // NEXTUI

Badge

Topographic badge with neon, cream, warning, error, and info variants. Monospace labels on dark surfaces.

$npx @voltenworks/shipui add badge --theme contour
Or install the base component for free:
Live Preview
Open full demo
voltenworks.com/shipui/contour/demo/components#02-badge
Usage
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>
  )
}
Preview in theme demoGet full theme, $29
Works withNext.js 15React 19Tailwind v4TypeScript 5
More from CONTOUR // NEXT
CONTOUR // NEXTUI

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.

CONTOUR // NEXTUI

Text

Polymorphic text component with body, caption, label, and code variants. IBM Plex Mono for labels and code, Space Grotesk for body.

CONTOUR // NEXTUI

Card

Data card with icon, tag badge, title, and description. Supports wide variant for featured layouts. Midnight navy surface with neon green accents.