# Spacer - **Category:** Layout (`layout`) - **Slug:** `layout/spacer` - **Status:** stable - **Platforms:** web, mobile - **Import:** `import { Spacer } from "@protocore/pds";` - **Docs:** https://pds.protocore.io/components/layout/spacer > A presentational spacer — a fixed token-scale gap, or a flexible fill that pushes siblings apart. ## When to use it A flexible `Spacer` is the idiomatic way to push siblings to opposite ends of a flex row — reach for it before `justify-content` when only one gap needs to grow. A fixed `Spacer` handles a **single** exceptional gap that breaks from the surrounding rhythm. When *every* child needs the same gap, don't sprinkle Spacers between them — use a `Stack` (or `Grid`) `gap`, which is cleaner and keeps the rhythm in one place. Spacer is purely presentational and `aria-hidden`; when the separation should be *seen*, use a `Divider` instead. ## Mobile (React Native) **Preview.** `@protocore/pds-mobile` ships the React Native sibling of **Spacer**. It mirrors the web API where React Native allows; the package is a **preview** with no device-level QA yet, so pin it and expect small changes. Import it from the mobile package (not `@protocore/pds`), inside a `` — there is no stylesheet, so `style` (a `ViewStyle`) replaces `className` and every value comes from the theme: ```tsx import { Spacer } from "@protocore/pds-mobile"; ``` **Parity with web.** A layout gap — a fixed token `size`, or grows to fill (`flex: 1`) when `size` is omitted. - Purely presentational and hidden from the a11y tree. ```tsx Left Right ``` ## Props | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `className` | `string` | no | — | — | | `size` | `enum` | no | — | Fixed size on the `--pds-space-*` scale. Omit to grow and fill (flex: 1). | | `style` | `CSSProperties` | no | — | — | ## Examples ### Fixed size With a `size`, `Spacer` inserts a fixed gap on the `--pds-space-*` scale — a one-off nudge between two elements without touching their margins. ```tsx import { Spacer, Heading, Text } from "@protocore/pds"; export default function SpacerFixed() { return (
Deploy summary 3 services updated, 0 failed. rolled out in 4.2s
); } ``` ### Flexible push Omit `size` and the `Spacer` grows (`flex: 1`) to fill available space, pushing the elements on either side apart — the classic "brand on the left, actions on the right" bar. ```tsx import { Spacer, Stack, Logo, Button } from "@protocore/pds"; export default function SpacerFlexible() { return ( ); } ``` ## Do & don't **Do** - Use a flexible Spacer to push a brand and actions to opposite ends of a row. - Use a fixed Spacer for a single gap that intentionally breaks the rhythm. - Prefer a Stack/Grid gap when the same spacing repeats between many children. **Don't** - Insert a Spacer between every list item — that is what a gap is for. - Use a Spacer where a visible rule is wanted; that is a Divider. - Pass a raw pixel value — size is a step on the token scale. ## Accessibility **Notes** - Spacer renders an `aria-hidden` `` and is absent from the accessibility tree. - It carries no content, so it never affects reading or focus order. ## Related `stack`, `divider`, `grid`, `container` --- © Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/