Spacer

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.

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.

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.

Accessibility

• Spacer renders an `aria-hidden` `<span>` and is absent from the accessibility tree.
• It carries no content, so it never affects reading or focus order.

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 <PdsProvider> — there is no stylesheet, so style (a ViewStyle) replaces className and every value comes from the theme:

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.

<HStack>
  <Text>Left</Text>
  <Spacer />
  <Text>Right</Text>
</HStack>