Etiqueta pequeña que se ancla a otro elemento — una fila de pedido, un
nombre de mesa, un ítem del menú — para señalar estado, conteo o categoría.
No es interactiva por sí sola; si necesitas que el usuario la presione, usa
button con size="sm".
Familias de marca
Cualquier familia de la paleta puede temizar un badge — útil para
categorizar pedidos por zona, etiquetar mesas, distinguir áreas del menú o
cualquier sistema de clasificación. Dos estilos por familia: soft
(fondo en tono 100, texto en 700) para señalización
informativa, bold (fondo en tono base, texto en contraste) para
énfasis.
Variantes
shadcn trae cuatro variantes nativas. Cada una tiene un peso visual distinto.
default
secondary
destructive
outline
Con ícono
Un ícono Phosphor antes del texto refuerza la lectura rápida. Mantén el ícono pequeño (12-14px) para no romper la altura del badge.
default + ícono fill
Colores custom
shadcn cubre default, secondary, destructive
y outline. Para success, warning e info
mapea directo a la marca: fondo suave en -100, texto en -700.
success — asiento (verde)
warning — sol (amarillo)
info — mantel (cyan)
Estado theme: ⚠ pendiente verificar.