Source: badge/Badge.js

import './Badge.html'

/**
 * Renders variants of a small badge to display pieces of information, such
 * as counters and labeling content.
 * @module
 * @see https://blazeui.meteorapp.com/components?c=Badge
 */

/**
 * @type object
 * @property [variant=default] {('default'|'secondary'|'destructive'|'outline')} supported default variants
 */
export const Badge = {
  name: 'Badge',
  main: true,
  class: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
  variants: {
    variant: {
      default:
        "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
      secondary:
        "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
      destructive:
        "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
      outline: "text-foreground"
    }
  },
  defaultVariants: {
    variant: "default"
  }
}