Moodinary/UI

Spinner

Esperas cortas (<2 s) dentro de un botón o inline. Para contenido, Skeleton.

Indicador pixel para esperas cortas dentro de un botón, como Generar o Regenerar el link de la pantalla. Para contenido usá Skeleton.

Instalación

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

Ejemplos

Tamaños y texto

Hereda el color del texto con currentColor.

Código
states.tsx
import { Button } from "@moodinary/ui/components/button";
import { Spinner } from "@moodinary/ui/components/spinner";

export default function SpinnerStates() {
	return (
		<>
			<Button aria-busy disabled size="sm" variant="secondary">
				<Spinner />
				Regenerando…
			</Button>
			<Button aria-busy disabled variant="secondary">
				<Spinner />
				Generando PDF…
			</Button>
			<Button aria-busy disabled size="lg">
				<Spinner size="lg" />
				Guardando…
			</Button>
		</>
	);
}

Props

Spinner

PropTipoDefaultDescripción
size"default" | "lg""default"14 o 22 px.
classNamestring-Clases extra.

Cuándo sí y cuándo no

Hacé
  • Decí qué está pasando.
  • Usalo en esperas cortas.
  • Mantené el ancho del botón mientras carga.
Evitá
  • No reemplaces una página entera con un spinner.
  • No pongas varios a la vez.
  • No lo uses si podés mostrar avance.

Accesibilidad

  • El spinner es decorativo; el contenedor necesita role="status" y texto o aria-label.