Spacer#

A DS-neutral spacing element: a fixed square of size (width and height), or a flexible filler (flex: 1) that pushes siblings apart when size is omitted.

Import#

import { Spacer } from '@sigx/lynx-zero';

Basic usage#

Spacer is one of Zero's layout primitives — flex structure built on Lynx views, with no class names of its own. Pass a size to render a fixed square gap (the same value for width and height):

import { Col, Spacer } from '@sigx/lynx-zero';

function Stack() {
  return (
    <Col>
      <view class="text-base-content">Top</view>
      <Spacer size={16} />
      <view class="text-base-content">Bottom</view>
    </Col>
  );
}

Flexible filler#

Omit size and Spacer becomes a flexible filler (flex: 1), absorbing the leftover space along the main axis. Drop one between siblings in a Row to push them to opposite ends:

import { Row, Spacer } from '@sigx/lynx-zero';

function Toolbar() {
  return (
    <Row gap={8} align="center" padding={12} background="base-100" borderRadius={12}>
      <view class="text-base-content">Title</view>
      <Spacer />
      <view class="text-base-content">Action</view>
    </Row>
  );
}

For the gaps between children, prefer the gap prop on Row / Col. Reach for Spacer when you need an asymmetric push (a flexible filler) or a one-off fixed gap that differs from the container's gap.

Extra classes#

Like every Zero primitive, Spacer accepts class for arbitrary extra utilities appended after its computed style:

import { Spacer } from '@sigx/lynx-zero';

<Spacer size={24} class="bg-base-200" />

Props#

Spacer has no default slot, and emits no events.

See also#

• API reference — every @sigx/lynx-zero export, signature and type.
• Usage — the layout primitives (Row, Col, Center, Spacer, ScrollView) in context.