Badge

<Badge variant="green">Stable</Badge>

import type * as React from 'react'
import { cn } from '@/lib/utils'

type BadgeVariant = 'green' | 'blue' | 'yellow' | 'red' | 'purple' | 'muted'

interface BadgeProps {
  variant?:   BadgeVariant
  children:   React.ReactNode
  className?: string
}

export function Badge({
  variant   = 'muted',
  children,
  className,
}: BadgeProps): React.JSX.Element {
  return (
    <span className={cn('vault-badge', `vault-badge--${variant}`, className)}>
      {children}
    </span>
  )
}