Badge

Etiqueta pequeña para indicar estados, categorías o contadores.

---

Import

import { Badge } from '@imansi/ui';

---

Uso básico

<Badge>Nuevo</Badge>

---

Variantes

<Badge variant="primary">Primario</Badge>
<Badge variant="secondary">Secundario</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="success">Completado</Badge>
<Badge variant="warning">Pendiente</Badge>
<Badge variant="destructive">Fallido</Badge>
<Badge variant="info">Info</Badge>

Variante	Uso
primary	Por defecto, color de marca
secondary	Menos énfasis
outline	Solo borde
success	Estado exitoso
warning	Advertencia
destructive	Error o peligro
info	Información neutral

---

Con íconos

import { Check, AlertCircle, Clock } from 'lucide-react';

<Badge variant="success">
  <Check className="h-3 w-3" />
  Completado
</Badge>

<Badge variant="warning">
  <Clock className="h-3 w-3" />
  Pendiente
</Badge>

<Badge variant="destructive">
  <AlertCircle className="h-3 w-3" />
  Fallido
</Badge>

---

Como contador

<Badge variant="destructive">24</Badge>
<Badge variant="primary">99+</Badge>

---

En tablas

<td>
  <Badge variant="success">Activo</Badge>
</td>
<td>
  <Badge variant="outline">Inactivo</Badge>
</td>

---

Props

Prop	Tipo	Default	Descripción
variant	'primary' | 'secondary' | 'outline' | 'success' | 'warning' | 'destructive' | 'info'	'primary'	Estilo visual
className	string	—	Clases adicionales
...props	HTMLAttributes<HTMLSpanElement>	—	Todas las props nativas

---

Personalización

<Badge className="bg-purple-100 text-purple-800 border-purple-200">
  Custom
</Badge>

---

Ejemplo completo

import { Badge } from '@imansi/ui';

const estados = {
  activo: { label: 'Activo', variant: 'success' },
  pendiente: { label: 'Pendiente', variant: 'warning' },
  cancelado: { label: 'Cancelado', variant: 'destructive' },
};

export function EstadoUsuario({ estado }) {
  const config = estados[estado];
  if (!config) return null;

  return <Badge variant={config.variant}>{config.label}</Badge>;
}