Spacer

A flex-grow element that pushes siblings apart. Use it inside Row or Stack to create space between items without explicit margins.

Basic Usage

Spacer pushing items apart in a row

<x-wirekit::row>
    <x-wirekit::button intent="neutral">Back</x-wirekit::button>
    <x-wirekit::spacer />
    <x-wirekit::button intent="primary">Continue</x-wirekit::button>
</x-wirekit::row>

In a Header Row

Brand left, actions right

MyApp

<x-wirekit::row wrap>
    <x-wirekit::badge intent="primary" size="lg">MyApp</x-wirekit::badge>
    <x-wirekit::spacer />
    <x-wirekit::row gap="sm" wrap>
        <x-wirekit::button intent="neutral" surface="ghost" size="sm">Docs</x-wirekit::button>
        <x-wirekit::button intent="neutral" surface="ghost" size="sm">Pricing</x-wirekit::button>
        <x-wirekit::button intent="primary" size="sm">Sign Up</x-wirekit::button>
    </x-wirekit::row>
</x-wirekit::row>

In a Stack

Spacer pushing footer to bottom

Main content

Footer pinned to bottom

<x-wirekit::stack style="min-height: 200px">
    <x-wirekit::card><x-wirekit::card.body>Main content</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::spacer />
    <x-wirekit::card><x-wirekit::card.body>Footer pinned to bottom</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stack>

Props

Prop	Type	Default	Description
`scope`	string\|null	`null`	Scoped personalization name

The spacer renders as a <div> with aria-hidden="true" and flex-grow: 1. It accepts additional classes via the class attribute.

Keyboard Interaction

This component is a layout wrapper. Keyboard interaction is delegated to its children.

Design Tokens

The Spacer is a pure layout primitive — it renders an invisible flex-grow: 1 element with no color, border, typography, or padding. It does not reach for any WireKit theme tokens directly.

Was this page helpful?

Thank you for your feedback!

What was missing? (optional)

Voting requires cookies or local storage. What we store