Spacer · Glowup

LAYOUT · 89 / 89

Spacer

Spacer — a Material You layout component for React Native and web.

󱀫

packages/ui/src/components/Layout/Spacer.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Before

After

Properties

2 controls

Size

Axis

Usage

Spacer.tsx

Variants

The states and shapes this component is meant to be used in.

Pushes apart

With no `size`, Spacer absorbs the leftover space along the parent's axis.

Invoices

Fixed size

size="xs" below

size="l" above

Horizontal axis

Left

32px later

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

2 on SpacerProps

axis

"vertical" | "horizontal"

default: "vertical"

Which axis `size` applies to. Defaults to `"vertical"`.

size

SpacingValue

Fixed size along the parent's axis. Omit to absorb the leftover space.