Spacer

Headless Spacer; covers CSS logical properties, HTML span, SVG element host.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Spacer } from "@vizejs/ui/spacer";

Or copy the source into your project with vize lib pull spacer (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Decorative spacers that add block and inline gaps without extra markup semantics. -->
<script setup lang="ts">
import { Spacer } from "@vizejs/ui/spacer";
</script>

<template>
  <div>
    <h2>Checkout</h2>
    <Spacer size="1.5rem" />
    <p>
      <button type="button">Back</button>
      <Spacer axis="inline" size="0.75rem" />
      <button type="button">Place order</button>
    </p>
  </div>
</template>

API

Spacer

Source: src/families/layout/spacer/spacer.vue

Props

Exposed

Behavior

Normative state x input -> outcome table for spacer.vue (@vizejs/ui/spacer). Every row is proven by the named mounted-DOM or SSR test. A row without a passing test is a contract violation.

Props

Slots

Spacer has no public slots. It is always decorative layout structure, so content belongs in adjacent semantic elements.

Expose

Data Attributes

ARIA Attributes

Spacer never sets role, aria-label, aria-labelledby, or tabindex.

CSS Custom Properties

Parts