ProgressBar

Barra de progreso de 8px con el porcentaje a la derecha o debajo.

Cuándo usarlo

Props. value (0–100), label (right · bottom · false), aria-label. Pista bg-quaternary, relleno fg-brand-primary.

Ejemplos

62%

30%

Props

Prop	Tipo	Por defecto	Descripción
`value`obligatoria	`number`	—	De 0 a 100.
`label`	`false \| "right" \| "bottom"`	`right`	Porcentaje a la derecha (por defecto), debajo o sin texto.
`aria-label`	`string`	—	Qué progresa: "Presupuesto usado", "Subida".
`className`	`string`	—

Código

import { ProgressBar } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<ProgressBar value={62} aria-label="Presupuesto usado" />
		</>
	);
}

---
import { ProgressBar } from "@jotis-me/react";
---

<ProgressBar value={62} aria-label="Presupuesto usado" />