@sigx/lynx-zero · Beta · Component library

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#

TSX

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):

TSX

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

function Stack() {
  return (
    <Col>
      <text>Top</text>
      <Spacer size={16} />
      <text>Bottom</text>
    </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:

TSX

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

function Toolbar() {
  return (
    <Row gap={8} align="center" padding={12} background="base-100" borderRadius={12}>
      <text>Title</text>
      <Spacer />
      <text>Action</text>
    </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 your own stylesheet classes, applied beside its computed inline style:

TSX

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

<Spacer size={24} class="section-gap" />

Props#

Prop	Type	Description
`size`	`number`	Fixed square size applied to both width and height. Omit it to make the spacer a flexible filler (`flex: 1`) that fills the remaining space along the main axis.
`class`	`string`	Extra CSS classes, appended after the computed ones.

Every style prop also accepts a per-breakpoint object such as { initial: 16, expanded: 32 }, resolved mobile-first against the window's width class. See responsive props.

Spacer has no default slot, and emits no events.