Spacer
spacerInserts token-scaled horizontal or vertical layout space without semantic content.
Usage
Horizontal spacing
x creates a horizontal gap between two inline elements (× 0.25rem, same as Tailwind spacing scale).
AB
tsx
<span className="inline-flex items-center">
<Box>A</Box>
<Spacer x={8} />
<Box>B</Box>
</span>Vertical Spacing
y Providing upper and lower space in the vertical layout.
onNext
tsx
<span className="inline-flex flex-col">
<Box>Up</Box>
<Spacer y={6} />
<Box>Down</Box>
</span>When to use
Use Spacer to insert fixed horizontal or vertical whitespace between two adjacent elements. It is aria-hidden and does not enter the accessibility tree. Prefer the gap prop on Stack or Grid for consistent spacing across a whole group. Use Divider or Separator when the boundary should be visible.
Import
ts
import { Spacer } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| x | number | 1 | Horizontal spacing (× 0.25rem, same as Tailwind spacing scale) |
| y | number | — | Vertical spacing (× 0.25rem) |
| className | string | — | Extra class name |
Example
tsx
// Horizontal space
<span className="inline-flex items-center">
<Box>A</Box>
<Spacer x={8} />
<Box>B</Box>
</span>
// Vertical space
<span className="inline-flex flex-col">
<Box>Above</Box>
<Spacer y={6} />
<Box>Below</Box>
</span>Usage guidelines
x and y use Tailwind spacing multiples, so x={8} equals 2rem. Use x along a flex row and y along a flex column; a Spacer whose dimension does not match the parent's main axis may not create the intended gap.
Related
Playground
AB
<Spacer x={8} y={4} />