Saltar al contenido
VEXA
enes
Visualización de datos

Badge

Apto para servidor

A compact status or category label.

Vista previa en vivo

Renderizado desde el código fuente instalado de VEXA — los mismos archivos que recibes.

Escritorio
NeutralOutlinePrimaryActivePendingFailed

Playground

Ajusta las props y copia el JSX equivalente.

Badge

Playground

badge.tsx
<Badge>Badge</Badge>

Instalación

Añade el código del componente a tu proyecto. Las dependencias del registry se resuelven automáticamente.

npx shadcn@latest add https://vexa.valfiguer.com/r/badge.json

Se instala en components/vexa/badge.tsx

Dependencias npm

  • class-variance-authority

Dependencias del registry

  • @vexa/utils

Otros items de VEXA que necesita este componente. Instálalos primero — la CLI los resuelve automáticamente.

Código

Cópialo a su ruta destino, o instálalo con el comando de arriba.

components/vexa/badge.tsx
import type * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

export const badgeVariants = cva(
  [
    "inline-flex items-center gap-1 whitespace-nowrap",
    "rounded-vexa-sm border px-2 py-0.5 text-xs font-medium",
    "[&_svg]:size-3 [&_svg]:shrink-0",
  ],
  {
    variants: {
      variant: {
        neutral:
          "border-transparent bg-vexa-secondary text-vexa-secondary-foreground",
        outline: "border-vexa-border bg-transparent text-vexa-foreground",
        primary:
          "border-transparent bg-vexa-primary text-vexa-primary-foreground",
        success:
          "border-transparent bg-vexa-success text-vexa-success-foreground",
        warning:
          "border-transparent bg-vexa-warning text-vexa-warning-foreground",
        danger: "border-transparent bg-vexa-danger text-vexa-danger-foreground",
      },
    },
    defaultVariants: {
      variant: "neutral",
    },
  },
);

export interface BadgeProps
  extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}

/**
 * Badge — a compact status or category label.
 *
 * RSC-safe. Meaning must not rely on color alone: always include text (and,
 * optionally, an icon) so status is conveyed non-visually as well.
 */
export function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <span
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  );
}
JSON del registryr/badge.json
r/badge.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:ui",
  "title": "Badge",
  "description": "A compact status or category label.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@vexa/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/badge.tsx",
      "type": "registry:ui",
      "target": "components/vexa/badge.tsx",
      "content": "import type * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport const badgeVariants = cva(\n  [\n    \"inline-flex items-center gap-1 whitespace-nowrap\",\n    \"rounded-vexa-sm border px-2 py-0.5 text-xs font-medium\",\n    \"[&_svg]:size-3 [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        neutral:\n          \"border-transparent bg-vexa-secondary text-vexa-secondary-foreground\",\n        outline: \"border-vexa-border bg-transparent text-vexa-foreground\",\n        primary:\n          \"border-transparent bg-vexa-primary text-vexa-primary-foreground\",\n        success:\n          \"border-transparent bg-vexa-success text-vexa-success-foreground\",\n        warning:\n          \"border-transparent bg-vexa-warning text-vexa-warning-foreground\",\n        danger: \"border-transparent bg-vexa-danger text-vexa-danger-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"neutral\",\n    },\n  },\n);\n\nexport interface BadgeProps\n  extends React.ComponentProps<\"span\">, VariantProps<typeof badgeVariants> {}\n\n/**\n * Badge — a compact status or category label.\n *\n * RSC-safe. Meaning must not rely on color alone: always include text (and,\n * optionally, an icon) so status is conveyed non-visually as well.\n */\nexport function Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <span\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "meta": {
    "frameworks": [
      "react",
      "next"
    ],
    "rsc": "server-safe",
    "variants": {
      "variant": [
        "neutral",
        "outline",
        "primary",
        "success",
        "warning",
        "danger"
      ]
    },
    "cssVars": [
      "--vexa-secondary",
      "--vexa-secondary-foreground",
      "--vexa-primary",
      "--vexa-primary-foreground",
      "--vexa-success",
      "--vexa-warning",
      "--vexa-danger",
      "--vexa-border",
      "--vexa-foreground"
    ],
    "a11y": "Status is conveyed by text (and optional icon), never color alone.",
    "example": "<Badge variant=\"success\">Active</Badge>",
    "tests": "planned — see docs/README.md#roadmap"
  }
}

Detalles

Variantes

variant
neutraloutlineprimarysuccesswarningdanger

Accesibilidad

Status is conveyed by text (and optional icon), never color alone.