Space

A layout container that applies uniform spacing between children, built on native CSS gap. Pure layout element (role="presentation"), invisible to the accessibility tree.

Basic Usage

Horizontal

<script setup lang="ts">
</script>

<template>
  <LhSpace>
    <LhButton>One</LhButton>
    <LhButton>Two</LhButton>
    <LhButton>Three</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace>
    <LhButton>One</LhButton>
    <LhButton>Two</LhButton>
    <LhButton>Three</LhButton>
  </LhSpace>
</template>

Vertical

Vertical

<script setup lang="ts">
</script>

<template>
  <LhSpace direction="vertical">
    <LhButton>One</LhButton>
    <LhButton>Two</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace direction="vertical">
    <LhButton>One</LhButton>
    <LhButton>Two</LhButton>
  </LhSpace>
</template>

Size

Preset sizes map to --lh-spacing-* theme tokens; pixel numbers and [horizontal, vertical] arrays are also supported.

Sizes

<script setup lang="ts">
</script>

<template>
  <!-- small preset -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- medium preset -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- large preset -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- custom pixel size -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- small preset -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- medium preset -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- large preset -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- custom pixel size -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

Wrap

Wrap

Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6Tag 7Tag 8Tag 9Tag 10Tag 11Tag 12

alignment controls how children align on the cross axis; the default is centered.

Alignment

Taller item

Taller item

<script setup lang="ts">
</script>

<template>
  <!-- allow wrapping -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">Tag {{ n }}</LhTag>
  </LhSpace>
  <!-- start alignment -->
  <LhSpace alignment="start">
    <LhButton>start aligned</LhButton>
    <span style="height: 48px; line-height: 48px">Taller item</span>
  </LhSpace>
  <!-- end alignment -->
  <LhSpace alignment="end">
    <LhButton>end aligned</LhButton>
    <span style="height: 48px; line-height: 48px">Taller item</span>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- allow wrapping -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">Tag {{ n }}</LhTag>
  </LhSpace>
  <!-- start alignment -->
  <LhSpace alignment="start">
    <LhButton>start aligned</LhButton>
    <span style="height: 48px; line-height: 48px">Taller item</span>
  </LhSpace>
  <!-- end alignment -->
  <LhSpace alignment="end">
    <LhButton>end aligned</LhButton>
    <span style="height: 48px; line-height: 48px">Taller item</span>
  </LhSpace>
</template>

API

Props

Prop	Description	Type	Default
direction	Layout direction	"horizontal" | "vertical"	'horizontal'
size	Spacing: preset / pixels / [horizontal, vertical]	number | "small" | "medium" | "large" | [number, number]	'medium'
wrap	Allow wrapping (horizontal only)	boolean	true
alignment	Alignment	"start" | "center" | "end" | "baseline"	'start'
sx	Shorthand layout props (e.g. { mt: 2 }), merged into the inline styles and taking precedence over alignment	LhSxProps	—

Accessibility

• The container is a role="presentation" layout element and never captures focus
• Spacing uses native CSS gap — children are not wrapped in extra DOM

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/space/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhSpaceProps

export interface LhSpaceProps {
  direction?: 'horizontal' | 'vertical'
  size?: LhSpaceSizeInput
  wrap?: boolean
  alignment?: LhSpaceAlignment
  sx?: LhSxProps
}

LhSpaceSizeInput _{(from @lh-ui/share/core/space)}

export type LhSpaceSizeInput = 'small' | 'medium' | 'large' | number | [number, number]

LhSpaceAlignment _{(from @lh-ui/share/core/space)}

export type LhSpaceAlignment = 'start' | 'center' | 'end' | 'baseline'