> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: f81c7089-cf08-40dc-896f-9fe33a1812f7
---

# Spacer

> Learn about the Spacer component for use in UI extensions.

Use the `Spacer` component to add vertical space between components. This component is intended for one-off use in situations where other layout components like [Flex](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex.md) don't fully provide the spacing you need. You can use this component in tandem with the [AutoGrid](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/autogrid.md), [Flex](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex.md), [Box](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box.md), and [Inline](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/inline.md) components to [manage extension layout](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/manage-ui-extension-layout.md).

> [!TIP]
>
> For consistent spacing between multiple components, use the [Flex](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex.md) component with the `direction="column"` and the `gap` props instead. Flex automatically applies uniform spacing between children, which makes layout easier to maintain.

![Two button components spaced vertically using the Spacer component.](https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/ui-components/ui-component-spacing-example.png)

```jsx wrap theme={null}
import { Button, Spacer, Text } from '@hubspot/ui-extensions';

hubspot.extend(() => <Extension />);

const Extension = () => {
  return (
    <>
      <Text>These buttons have medium spacing between them:</Text>
      <Button>Button</Button>
      <Spacer size="medium" />
      <Button>Button</Button>
    </>
  );
};

```

## Props

<table>
  <thead><tr><th>Prop</th>
  <th>Type</th>
  <th>Description</th></tr></thead>

  <tbody>
    <tr>
      <td>`size`</td>

      <td>
        `"xs"`, `"extra-small"` | `"sm"`, `"small"` | `"md"`, `"medium"` | `"lg"`, `"large"` | `"xl"`, `"extra-large"`

        **Default:** `"small"`
      </td>

      <td>The amount of vertical space to render. Abbreviated and full-name values are equivalent (e.g., `"sm"` and `"small"` produce identical output).</td>
    </tr>

    <tr><td>`testId`</td>
    <td>`string`</td>
    <td>Used by `findByTestId()` to locate this component in tests.</td></tr>
  </tbody>
</table>

## Distances

The `size` prop controls how much vertical space is rendered. Each size maps to a consistent spacing value from the HubSpot design system:

* `extra-small` / `xs`: minimal spacing for tightly grouped elements.
* `small` / `sm`: default spacing suitable for most use cases.
* `medium` / `md`: moderate spacing for separating related content sections.
* `large` / `lg`: generous spacing for creating clear visual breaks.
* `extra-large` / `xl`: maximum spacing for major section divisions.

## Spacer vs. Flex

For most layouts, you should use [Flex](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex.md) with `direction="column"` and a `gap` value instead of `Spacer`, as it provides uniform spacing between all children without needing to manually insert `Spacer` components.

```jsx wrap theme={null}
import { Flex, Text } from '@hubspot/ui-extensions';

const Extension = () => {
  return (
    <Flex direction="column" gap="medium">
      <Text>First section</Text>
      <Text>Second section</Text>
      <Text>Third section</Text>
    </Flex>
  );
};
```

Use `Spacer` for situations where you need non-uniform spacing or a one-off adjustment:

```jsx highlight={8} wrap theme={null}
import { Flex, Text, Spacer } from '@hubspot/ui-extensions';

const Extension = () => {
  return (
    <Flex direction="column" gap="small">
      <Text>First section</Text>
      <Text>Second section</Text>
      <Spacer size="extra-large" />
      <Text>Final section with extra space above</Text>
    </Flex>
  );
};

```

## Guidelines

* **DO:** use `Spacer` for one-off vertical spacing adjustments where you need different spacing at a specific point.
* **DO:** use the smallest `Spacer` size that creates adequate visual separation.
* **DON'T:** use multiple `Spacer` components when `Flex` with `gap` would achieve the same result more cleanly.
* **DON'T:** use `Spacer` for horizontal spacing. Use `Flex` with `direction="row"` and `gap` instead.
* **DON'T:** use `Spacer` when a `Divider` would better communicate the separation between sections.

## Related components

* [AutoGrid](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/autogrid.md)
* [Flex](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex.md)
* [Box](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box.md)
* [Divider](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/divider.md)
* [Inline](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/inline.md)