> ## 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: 4306ff31-514f-490e-87f1-819dd03c1097
---

# Divider

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

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>;
};

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

The `Divider` component renders a grey, horizontal line for spacing out components vertically or creating sections in an extension. Use this component to space out other components when the content needs more separation than white space.

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/divider-with-text.png" alt="divider-with-text" />
</Frame>

```jsx theme={null}
import { Divider, Text } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <>
      <Text>Text above the divider.</Text>
      <Divider />
      <Text>Text below the divider.</Text>
    </>
  );
};
```

## Props

<ComponentProps autoGenerated componentName="Divider">
  <ComponentProp name="size" required={false} type={<><code>"extra-large"</code> | <code>"extra-small"</code> | <code>"flush"</code> | <code>"large"</code> | <code>"lg"</code> | <code>"md"</code> | <code>"medium"</code> | <code>"sm"</code> | <code>"small"</code> | <code>"xl"</code> | <code>"xs"</code></>} description={<>The space between the divider and the content above and below it.</>} 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>

## Variants

Using the `size` prop, you can set the amount of padding above and below the divider. Values range from `'extra-small'` to `'extra-large'` (`'small'` by default).

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/divider-distance-examples.png" alt="divider-distance-examples" />
</Frame>

## Guidelines

* **DO:** use dividers to group similar components together.
* **DO:** consider when a new card or component might be needed, rather than using a divider.
* **DON'T:** use two dividers in a row without content between them.

## Related components

* [Box](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box)
* [Accordion](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/accordion)
* [Tile](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tile)