Moodinary/UI

Badge

Etiquetas cortas de estado o conteo. Nunca como botón.

Etiqueta corta para estados, roles o conteos. No es interactiva, salvo la variante tag renderizada como link.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/badge.json
import
import { Badge } from "@moodinary/ui/components/badge";

Ejemplos

Variantes

Neutral, organización, outline, estado, plan y equipo con punto.

Borrador3 nuevasAdminActivoPausadoAlertaPlan Core4.º A
Código
variants.tsx
import { Badge } from "@moodinary/ui/components/badge";

export default function BadgeVariants() {
	return (
		<>
			<Badge>Borrador</Badge>
			<Badge variant="org">3 nuevas</Badge>
			<Badge variant="outline">Admin</Badge>
			<Badge variant="ok">Activo</Badge>
			<Badge variant="warn">Pausado</Badge>
			<Badge variant="err">Alerta</Badge>
			<Badge variant="solid">Plan Core</Badge>
			<Badge variant="org">
				<span aria-hidden className="size-1.5 rounded-full bg-org" />
				4.º A
			</Badge>
		</>
	);
}

Tag enlazable

Para temas o filtros que llevan a otra vista. Usá render con un link.

Organización
Código
tag.tsx
import { Badge } from "@moodinary/ui/components/badge";

export default function BadgeTag() {
	return (
		<Badge render={<a href="/components/badge" />} variant="tag">
			Organización
		</Badge>
	);
}

Props

Badge

PropTipoDefaultDescripción
variant"neutral" | "org" | "outline" | "ok" | "warn" | "err" | "solid" | "tag""neutral"Significado y peso visual.
renderReactElement-Renderiza otro elemento, por ejemplo un <code>&lt;a&gt;</code>.
classNamestring-Clases extra.

Cuándo sí y cuándo no

Hacé
  • Escribí una o dos palabras.
  • Usá ok, warn y err solo para estados reales.
  • Mantené la misma variante para el mismo significado.
Evitá
  • No uses badges como botones.
  • No muestres varios badges que repiten lo mismo.
  • No dependas solo del color para explicar el estado.

Accesibilidad

  • El texto del badge tiene que entenderse sin color.
  • Si es un link, usá la variante tag y un destino claro.