Spacer

Espacio flexible o fijo entre hermanos. Separa elementos en un Flex o agrega un hueco en un Stack.

NorthwindIF

1'use client';
2
3import { Notification03Icon, Search01Icon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { Avatar } from '@/components/ui/avatar';
6import { Button } from '@/components/ui/button';
7import { Flex } from '@/components/ui/flex';
8import { Spacer } from '@/components/ui/spacer';
9
10export function Default() {
11  return (
12    <Flex
13      align="center"
14      gap="2"
15      className="border-border bg-card w-full max-w-md rounded-xl border px-3 py-2"
16    >
17      <span className="px-2 text-sm font-semibold">Northwind</span>
18      <Spacer />
19      <Button variant="ghost" size="icon" aria-label="Search">
20        <HugeiconsIcon icon={Search01Icon} size={16} />
21      </Button>
22      <Button variant="ghost" size="icon" aria-label="Notifications">
23        <HugeiconsIcon icon={Notification03Icon} size={16} />
24      </Button>
25      <Avatar size="sm">
26        <Avatar.Fallback>IF</Avatar.Fallback>
27      </Avatar>
28    </Flex>
29  );
30}

Instalación

pnpm dlx nachui add spacer

Anatomía

1import { Spacer } from '@/components/ui/spacer';

1<Flex align="center">
2  <Logo />
3  <Spacer />
4  <Button>Iniciar sesión</Button>
5</Flex>

Sin size el spacer es flex-1 y ocupa el espacio que sobra, así que empuja a los hermanos que le siguen hasta el borde. Con size se convierte en un bloque fijo en el eje indicado, que se lee mejor que un mt-6 suelto en layouts largos. En ambos casos queda oculto para la tecnología asistiva.

Ejemplos

Flexible

Una barra de herramientas con las acciones al final.

NorthwindIF

1'use client';
2
3import { Notification03Icon, Search01Icon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { Avatar } from '@/components/ui/avatar';
6import { Button } from '@/components/ui/button';
7import { Flex } from '@/components/ui/flex';
8import { Spacer } from '@/components/ui/spacer';
9
10export function Default() {
11  return (
12    <Flex
13      align="center"
14      gap="2"
15      className="border-border bg-card w-full max-w-md rounded-xl border px-3 py-2"
16    >
17      <span className="px-2 text-sm font-semibold">Northwind</span>
18      <Spacer />
19      <Button variant="ghost" size="icon" aria-label="Search">
20        <HugeiconsIcon icon={Search01Icon} size={16} />
21      </Button>
22      <Button variant="ghost" size="icon" aria-label="Notifications">
23        <HugeiconsIcon icon={Notification03Icon} size={16} />
24      </Button>
25      <Avatar size="sm">
26        <Avatar.Fallback>IF</Avatar.Fallback>
27      </Avatar>
28    </Flex>
29  );
30}

Fijo

Huecos con nombre en un layout apilado, vertical y horizontal.

Delete workspace

Every project, deploy and member is removed. This cannot be undone.

1import { Button } from '@/components/ui/button';
2import { Spacer } from '@/components/ui/spacer';
3
4export function Fixed() {
5  return (
6    <div className="border-border bg-card w-full max-w-sm rounded-xl border p-6">
7      <p className="text-base font-semibold">Delete workspace</p>
8      <Spacer size="2" />
9      <p className="text-muted-foreground text-sm">
10        Every project, deploy and member is removed. This cannot be undone.
11      </p>
12      <Spacer size="6" />
13      <div className="flex">
14        <Button variant="outline" size="sm">
15          Keep it
16        </Button>
17        <Spacer axis="horizontal" size="3" />
18        <Button variant="destructive" size="sm">
19          Delete
20        </Button>
21      </div>
22    </div>
23  );
24}

Referencia de API

Spacer

Prop	Tipo	Por defecto	Descripción
`size`	`'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '8' \| '10' \| '12' \| '16' \| '20' \| '24' \| '32'`	-	Tamaño fijo en la escala de espaciado. Omite para flex
`axis`	`'vertical' \| 'horizontal'`	`'vertical'`	Dirección de un spacer fijo
`as`	`React.ElementType`	`'div'`	Elemento a renderizar
`className`	`string`	-	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

AnteriorCenter

SiguienteSplit