# Source: https://www.plain.com/docs/ui-components/spacer.md

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

# Spacer

<Frame><img src="https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=78d1e68c020b90ebb29cf098007f24e4" alt="Example spacer" data-og-width="1664" width="1664" data-og-height="526" height="526" data-path="public/images/ui-component-spacer.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?w=280&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=2d0c73a584c8902a71199ca12469c6b0 280w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?w=560&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=24988f9db188b4626a4ef142419b0e70 560w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?w=840&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=dc8cc4375801adb13035c5c3fc519d00 840w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?w=1100&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=d37fe0bb6ce4f2ac46e5417d5d731e5e 1100w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?w=1650&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=73d2536826eff1a44eb567d0cc04aa27 1650w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?w=2500&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=4f80998e3ce902edce6bf10ceda70105 2500w" /></Frame>

A link button has the following properties:

* `spacerSize`: the amount of space the component should take up. One of `XS`, `S`, `M`, `L`, `XL`.

For example:

<Tabs>
  <Tab title="Typescript SDK">
    <Snippet file="typescript-sdk/ui-spacer.mdx" />
  </Tab>

  <Tab title="GraphQL">
    <Snippet file="graphql/ui-spacer.mdx" />
  </Tab>
</Tabs>