---
title: Spacing
description: >-
  The `Spacing` component provides a set of spacing constants to be used in the
  POS UI extensions components library. Use these predefined values to maintain
  consistent spacing and layout patterns across POS interfaces.


  The component provides access to design system spacing tokens through a set of
  predefined constants, ensuring consistent spacing throughout extensions. It
  eliminates the need for hardcoded pixel values by offering semantic spacing
  values that automatically adapt to design system changes, maintaining visual
  consistency across different screen sizes and orientations.


  `Spacing` components provide semantic spacing names like 'tight', 'loose', and
  'extraLoose' that map to specific design system values, making spacing choices
  more intuitive and maintainable.
api_version: 2024-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/ui-components/layout-and-structure/spacing
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/ui-components/layout-and-structure/spacing.md
---

# Spacing

The `Spacing` component provides a set of spacing constants to be used in the POS UI extensions components library. Use these predefined values to maintain consistent spacing and layout patterns across POS interfaces.

The component provides access to design system spacing tokens through a set of predefined constants, ensuring consistent spacing throughout extensions. It eliminates the need for hardcoded pixel values by offering semantic spacing values that automatically adapt to design system changes, maintaining visual consistency across different screen sizes and orientations.

`Spacing` components provide semantic spacing names like 'tight', 'loose', and 'extraLoose' that map to specific design system values, making spacing choices more intuitive and maintainable.

#### Use cases

* **Element spacing:** Apply consistent spacing between elements in Stack components.
* **Vertical padding:** Control vertical padding and margins with semantic spacing values.
* **Horizontal spacing:** Manage horizontal spacing using the comprehensive spacing scale.
* **Visual hierarchy:** Establish visual hierarchy through strategic use of spacing values.

## Examples

### Use consistent spacing values

Apply consistent spacing patterns using design system tokens. This example demonstrates using predefined spacing constants instead of hardcoded pixel values, ensuring visual consistency that automatically adapts to design system changes across different screen sizes.

## Use consistent spacing values

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-10/spacing-default.png)

### Examples

* #### Use consistent spacing values

  ##### Description

  Apply consistent spacing patterns using design system tokens. This example demonstrates using predefined spacing constants instead of hardcoded pixel values, ensuring visual consistency that automatically adapts to design system changes across different screen sizes.

  ##### React

  ```tsx
  VerticalSpacing.ExtraSmall;
  HorizontalSpacing.ExtraSmall;
  ```

  ##### TS

  ```ts
  VerticalSpacing.ExtraSmall;
  HorizontalSpacing.ExtraSmall;
  ```

## VerticalSpacing

The spacing values for controlling vertical space between elements.

`'HalfPoint' | 'ExtraSmall' | 'Small' | 'Medium' | 'Large' | 'ExtraLarge'`

## HorizontalSpacing

The spacing values for controlling horizontal space between elements.

`'HalfPoint' | 'ExtraSmall' | 'Small' | 'Medium' | 'Large' | 'ExtraLarge' | 'ExtraExtraLarge'`

## Best practices

* **Apply numeric spacing for precise control:** Use the numeric spacing values when you need precise control over spacing amounts, particularly in `Stack` components where exact spacing relationships are important for visual hierarchy.
* **Maintain consistent spacing patterns:** Establish consistent patterns for how you use spacing values across your extension. Similar types of content should use similar spacing values, helping users develop familiarity with your interface organization.
* **Consider touch interface requirements:** Ensure adequate spacing for touch-based interactions by using appropriate spacing values that provide comfortable touch targets. POS interfaces require generous spacing for reliable touch interaction.
* **Balance spacing with content density:** Choose spacing values that balance content density with readability. Use smaller spacing values for information-dense interfaces and larger values when content needs breathing room.
* **Align spacing with visual hierarchy:** Use larger spacing values to separate major content areas and smaller values for related elements. This creates clear visual hierarchy that helps users understand content relationships.

## Limitations

* Spacing values are predefined constants—custom spacing values outside the provided scales aren't supported to maintain design system consistency.
* The `Spacing` component is primarily designed for layout components like `Stack`—not all components support all spacing types.
* Spacing behavior may vary between different POS device screen sizes and resolutions, though the relative relationships between spacing values remain consistent.