> ## 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.

export const Tag = ({children, type = 'default', className = ''}) => {
  return <span className={`tag tag-${type} ${className}`.trim()}>
      {children}
    </span>;
};

export const ComponentProp = ({name, required, type, description, defaultValue, seeItems}) => {
  const renderSeeItems = () => {
    if (!seeItems || seeItems.length === 0) {
      return null;
    }
    if (seeItems.length === 1) {
      return <div className="component-prop-see-wrapper">
          <strong>See:</strong> {seeItems[0]}
        </div>;
    }
    return <div className="component-prop-see-wrapper">
        See:
        <ul>
          {seeItems.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      </div>;
  };
  return <tr>
      <td>
        <code>{name}</code>
        {required && <> <Tag type="error">Required</Tag></>}
      </td>
      <td>
        {type}
        {defaultValue && <div className="component-prop-default-value-wrapper">
            <strong>Default:</strong> {defaultValue}
          </div>}
      </td>
      <td>
        {description}
        {renderSeeItems()}
      </td>
    </tr>;
};

export const ComponentProps = ({children}) => {
  return <div className="component-props">
      <table>
        <thead>
          <tr>
            <th>Prop</th>
            <th>Type</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>{children}</tbody>
      </table>
    </div>;
};

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](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex) don't fully provide the spacing you need. You can use this component in tandem with the [AutoGrid](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/autogrid), [Flex](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex), [Box](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box), and [Inline](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/inline) components to [manage extension layout](/apps/developer-platform/add-features/ui-extensions/ui-components/manage-ui-extension-layout).

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

<Frame>
  <img width="380px" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/ui-components/ui-component-spacing-example.png" alt="Two button components spaced vertically using the Spacer component." />
</Frame>

```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

<ComponentProps autoGenerated componentName="Spacer">
  <ComponentProp name="size" required={false} type={<><code>"extra-large"</code> | <code>"extra-small"</code> | <code>"large"</code> | <code>"medium"</code> | <code>"small"</code></>} description={<>The amount of vertical space to render.</>} defaultValue={<><code>"small"</code></>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/tools/testing/reference#findbytestid">Testing utilities reference</a></>]} />
</ComponentProps>

## 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`: minimal spacing for tightly grouped elements.
* `small`: default spacing suitable for most use cases.
* `medium`: moderate spacing for separating related content sections.
* `large`: generous spacing for creating clear visual breaks.
* `extra-large`: maximum spacing for major section divisions.

## Spacer vs. Flex

For most layouts, you should use [Flex](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex) 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](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/autogrid)
* [Flex](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/flex)
* [Box](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box)
* [Divider](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/divider)
* [Inline](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/inline)