Accessibility: Not Needed

Translations: Not Needed

Migration Guide: Full

Space

Arrange components with consistent spacing

Basic Usage

Use Space to add spacing between elements.

Vue

<template>
  <HLSpace id="space-basic">
    <HLButton id="space-basic-btn-1">Item 1</HLButton>
    <HLButton id="space-basic-btn-2">Item 2</HLButton>
    <HLButton id="space-basic-btn-3">Item 3</HLButton>
  </HLSpace>
</template>
<script setup>
  import { HLSpace, HLButton } from '@platform-ui/highrise'
</script>

Vertical Layout

Set vertical prop to arrange items vertically.

Vue

<template>
  <HLSpace id="space-vertical" vertical>
    <HLButton id="space-vertical-btn-1">Item 1</HLButton>
    <HLButton id="space-vertical-btn-2">Item 2</HLButton>
    <HLButton id="space-vertical-btn-3">Item 3</HLButton>
  </HLSpace>
</template>
<script setup>
  import { HLSpace, HLButton } from '@platform-ui/highrise'
</script>

Custom Size

Control spacing using the size prop.

Vue

<template>
  <HLSpace id="space-size-small" size="xs">
    <HLButton id="space-size-small-btn-1">Small</HLButton>
    <HLButton id="space-size-small-btn-2">Spacing</HLButton>
  </HLSpace>

  <HLSpace id="space-size-large" size="lg">
    <HLButton id="space-size-large-btn-1">Large</HLButton>
    <HLButton id="space-size-large-btn-2">Spacing</HLButton>
  </HLSpace>
</template>
<script setup>
  import { HLSpace, HLButton } from '@platform-ui/highrise'
</script>

Justify Content

Control alignment using the justify prop.

Vue

<template>
  <HLSpace id="space-justify" justify="space-between">
    <HLButton id="space-justify-btn-1">Left</HLButton>
    <HLButton id="space-justify-btn-2">Right</HLButton>
  </HLSpace>
</template>
<script setup>
  import { HLSpace, HLButton } from '@platform-ui/highrise'
</script>

Align Items

Control alignment using the align prop.

Vue

<template>
  <HLSpace id="space-align" align="center">
    <HLButton id="space-align-btn-1" size="lg">Item 1</HLButton>
    <HLButton id="space-align-btn-2" size="sm">Item 2</HLButton>
    <HLButton id="space-align-btn-3" size="2xs">Item 3</HLButton>
  </HLSpace>
</template>
<script setup>
  import { HLSpace, HLButton } from '@platform-ui/highrise'
</script>

Imports

import { HLSpace } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the element
align	'start' | 'end' | 'center' | 'baseline' | 'stretch' | undefined	undefined	Cross axis alignment
inline	boolean	false	Whether to render as an inline element
itemStyle	string | object | undefined	undefined	Style for space items
justify	'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'	'start'	Main axis alignment
size	'xs' | 'sm' | 'md' | 'lg' | '2xs' | '3xs' | number | [number, number]	'md'	Space size
vertical	boolean	false	Whether to lay out elements vertically
wrap	boolean	true	Whether to wrap elements

Slots

Name	Parameters	Description
default	()	The content to be spaced