Components · Layout

Space

An even, DS-scale gap between a small inline set of items — buttons, tags, inline controls.

Examples

Direction

Size

Align

Horizontal · size middle (the probe — the playground drives its attributes live)

Sizes · small · middle · large

ABC

Split · a thin rule between items

Edit Duplicate Delete

Vertical stack · size small

Line one

Line two

Line three

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-space> is the SAME shared custom element React and Vue consume — here in its
     native form. Theming comes only from the --aha-* tokens in tokens.css. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-space.js';   // registers <aha-space>
</script>

<!-- even gap between inline actions; size on the DS scale, cross-axis centred -->
<aha-space size="middle" align="center">
  <button>Save</button>
  <button>Cancel</button>
  <button>More</button>
</aha-space>

<!-- a thin --aha-split rule between items -->
<aha-space size="middle" split style="margin-top:24px">
  <a href="#">Edit</a>
  <a href="#">Duplicate</a>
  <a href="#">Delete</a>
</aha-space>

<!-- a row that wraps onto multiple lines when it runs out of width -->
<aha-space size="small" wrap style="max-width:220px; margin-top:24px">
  <span>alpha</span><span>beta</span><span>gamma</span><span>delta</span><span>epsilon</span>
</aha-space>

<!-- vertical stack -->
<aha-space direction="vertical" size="small" style="margin-top:24px">
  <div>Line one</div>
  <div>Line two</div>
  <div>Line three</div>
</aha-space>

import '@ahaslides-product/design/aha-space';   // registers <aha-space>

// A static layout primitive — the custom element renders identically in React, no wrapper needed.
<aha-space size="middle" align="center">
  <Button>Save</Button>
  <Button variant="secondary">Cancel</Button>
</aha-space>

// A thin divider between inline actions
<aha-space size="middle" split>
  <a href="#">Edit</a>
  <a href="#">Duplicate</a>
  <a href="#">Delete</a>
</aha-space>

// Vertical stack
<aha-space direction="vertical" size="small">
  <Field label="Name" />
  <Field label="Email" />
</aha-space>

// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/aha-space';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<template>
  <aha-space size="middle" align="center">
    <button>Save</button>
    <button>Cancel</button>
  </aha-space>

  <!-- A thin divider between inline actions -->
  <aha-space size="middle" split>
    <a href="#">Edit</a>
    <a href="#">Duplicate</a>
    <a href="#">Delete</a>
  </aha-space>

  <!-- Vertical stack -->
  <aha-space direction="vertical" size="small">
    <Field label="Name" />
    <Field label="Email" />
  </aha-space>
</template>

API

Prop	Type	Default	Notes
`size`	small \| middle \| large \| number	`small`	Gap between items — named DS step (8/16/24) or a raw pixel number
`direction`	horizontal \| vertical	`horizontal`	Lay items in a row or stack them
`align`	start \| center \| end \| baseline	`center`	Cross-axis alignment (align-items)
`wrap`	boolean	`false`	Allow items to wrap onto multiple lines
`split`	boolean	`false`	Rule a thin --aha-split divider between adjacent items

Install

# .npmrc — once: point the @ahaslides-product scope at GitHub Packages
@ahaslides-product:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages

npm i @ahaslides-product/design
import '@ahaslides-product/design/tokens.css';   // once, at the app root
import '@ahaslides-product/design/aha-space';   // registers <aha-space>

Agent feed for this component (absolute, fetchable anywhere): space.agent.json · space.md · space.llms.txt

When to use

Space — spacing a small inline set of items evenly — buttons in a toolbar, tags in a row
Flex — you need alignment/justification control over a block-level layout
Grid — the items belong in two-dimensional rows and columns

Space is the lightweight spacer — no alignment gymnastics, just a consistent gap. Keep sizes on the named scale so inline spacing matches across surfaces. It is layout, never decoration: it paints no background.

Surfaces

editor dashboard settings audience

Spec

Display inline-flex (row) · flex (vertical) · Size scale small 8 · middle 16 · large 24 (or a raw px number) · Default size small (8), row, items centred · Align start · center · end · baseline (align-items) · Wrap off by default; on lets a row flow onto multiple lines · Split 1px --aha-split #F1F1F1 rule between adjacent items (half-gap inset)