Saltar al contenido principal

Spinner

Mostrar procesos activos. Feedback claro. Prevenir acciones duplicadas.

default.tsx
1import { Spinner } from '@repo/ui/components/spinner';
2

3export default function SpinnerDefault() {
4  return (
5    <div className="flex items-center justify-center py-8">
6      <Spinner />
7    </div>
8  );
9}

Instalación

pnpm dlx nachui add spinner

Anatomía

1import { Spinner } from '@/components/ui/spinner';
1<Spinner />

Ejemplos

Por defecto

default.tsx
1import { Spinner } from '@repo/ui/components/spinner';
2

3export default function SpinnerDefault() {
4  return (
5    <div className="flex items-center justify-center py-8">
6      <Spinner />
7    </div>
8  );
9}

Tamaños

Puedes cambiar el tamaño del spinner usando la propiedad size.
sizes.tsx
1import { Spinner } from '@repo/ui/components/spinner';
2

3const sizes = ['sm', 'md', 'lg', 'xl'] as const;
4

5export default function SpinnerSizes() {
6  return (
7    <div className="flex items-end justify-center gap-6 py-8">
8      {sizes.map((size) => (
9        <Spinner key={size} size={size} />
10      ))}
11    </div>
12  );
13}

Variantes

Puedes cambiar el color del spinner usando la propiedad variant.
variants.tsx
1import { Spinner } from '@repo/ui/components/spinner';
2

3const variants = [
4  'default',
5  'primary',
6  'muted',
7  'success',
8  'destructive',
9  'warning',
10  'info',
11] as const;
12

13export default function SpinnerVariants() {
14  return (
15    <div className="flex flex-wrap justify-center gap-4 py-8">
16      {variants.map((variant) => (
17        <Spinner key={variant} variant={variant} />
18      ))}
19    </div>
20  );
21}

Referencia de API

Spinner

PropTipoPor defectoDescripción
size'sm' | 'md' | 'lg' | 'xl''md'El tamaño del spinner
variant'default' | 'primary' | 'muted' | 'success' | 'destructive' | 'warning' | 'info''default'Estilo visual
classNamestring-Clases CSS adicionales
¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue
AnteriorSkeleton
SiguienteSwitch