<script setup lang="ts">
import Alert from '~/components/ui/Alert.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
</script>

<style>
  .preview {
    padding:16px 0;
    flex-grow:1;
  }
</style>

# Spacer

Add a 16px gap between adjacent items.

##### Without spacer:

<Layout flex>

```vue-html
<Alert color="green">A</Alert>
<Alert color="red">B</Alert>
```

<div class="preview">

<Alert color="green">A</Alert>
<Alert color="red">B</Alert>

</div>

</Layout>

##### With spacer:

<Layout flex>

```vue-html{2}
<Alert color="green">A</Alert>
<Spacer/>
<Alert color="red">B</Alert>
```

<div class="preview">
<Alert color="green">A</Alert>
<Spacer/>
<Alert color="red">B</Alert>
</div>

</Layout>

##### Spacers can also be added for horizontal space:

<Layout flex>

```vue-html{4}
<Layout flex>
<Alert color="blue">A</Alert>
<Alert color="green">A</Alert>
<Spacer/>
<Alert color="red">B</Alert>
</Layout>
```

<div class="preview">
<Layout flex>
<Alert color="blue">A</Alert>
<Alert color="green">A</Alert>
<Spacer/>
<Alert color="red">B</Alert>
</Layout>
</div>
</Layout>
