Progress
Barra de avance determinada o indeterminada.
Usar
import { Progress } from "@unozero-ai/ui/react";
<Progress></Progress>Configurador
Cambia las props y mira el componente y su código al mismo tiempo.
<Progress />Con etiqueta y valor
Para un proceso que dura más de unos segundos y del que sabes cuánto falta: una importación, un envío de tarifas. label dice qué avanza y showValue añade el porcentaje, formateado en el idioma del kit. Es un progressbar accesible con label como nombre. Si dura menos de un segundo, un Spinner basta.
Variantes y cuota
Con max mides contra cualquier total (5 pasos, 5.000 conversaciones, 10 GB) y el porcentaje sale solo. Los tonos de estado sirven para una cuota que se acerca a su límite, pero la etiqueta cuenta la cifra: el color solo la confirma (la Regla del Tenant).
Tamaños
sm dentro de una fila o una tarjeta pequeña; md cuando la barra es lo principal de la vista.
Indeterminada
Cuando no sabes cuánto falta, como al esperar la respuesta de un channel manager. El porcentaje no se muestra aunque pases showValue. Si el proceso tiene pasos contables, cuéntalos: una barra determinada tranquiliza más. Con prefers-reduced-motion el tramo no corre: late quieto.
Seguir un envío
Un caso completo: el botón de marca lanza la sincronización, la barra avanza por lotes y al terminar cambia a success con una etiqueta que dice el resultado. El relleno es una transición, así que cada valor nuevo sigue desde donde iba, sin saltos. Pulsa «Sincronizar tarifas».
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).