Badge
Etiqueta de estado en píldora: el vocabulario de estado del sistema.
Usar
import { Badge } from "@unozero-ai/ui/react";
<Badge></Badge>Configurador
Cambia las props y mira el componente y su código al mismo tiempo.
<Badge>Pago pendiente</Badge>Variantes
Badge es el vocabulario de estado del sistema: úsalo antes que cualquier texto coloreado suelto. neutral es lo que no tiene estado o ya no cuenta, info lo que conviene saber, success lo que terminó bien, warning lo que pide atención y danger lo que falló o se canceló.
primary sigue el color del tenant, así que nunca significa un estado: resérvalo para atributos como «Reserva directa» o «Nuevo». Es la Regla del Tenant: ningún significado puede descansar en el azul.
Con punto
dot añade un punto en el color pleno de la familia. Úsalo para estados vivos, que pueden cambiar mientras miras la pantalla: la conexión con el PMS, el agente activo o en pausa. Para un estado que ya quedó fijo, como una factura pagada, basta la píldora.
Con icono
Un <svg> como primer hijo refuerza el estado con la forma, no solo con el color. El significado lo lleva la palabra; el icono y el color lo confirman, así la etiqueta se sigue leyendo con la paleta de cualquier tenant y sin distinguir colores. El kit le da al icono su tamaño (12 px) y su espacio; márcalo con aria-hidden, porque la palabra ya lo dice. Si tu app usa el reset de Tailwind, que pone todo svg en bloque y sin margen, añádele className="mr-1 inline" o el icono salta encima del texto.
Texto largo
La píldora no parte el texto en varias líneas: si no cabe, lo corta con puntos suspensivos ella sola (en el kit React había que envolverlo en un span con truncate). Pasa el texto completo en title. Mejor aún, acórtalo: una etiqueta de más de tres palabras suele ser una frase.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).