Skip to main content
WireKit
Copy for LLM

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>
    <x-wirekit::badge intent="primary" size="lg">MyApp</x-wirekit::badge>
    <x-wirekit::spacer />
    <x-wirekit::row gap="sm">
        <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?

Voting requires cookies or local storage. What we store