Spacer

@coinbase/cds-web@8.21.3

Creates space between elements.

Import

import { Spacer } from '@coinbase/cds-web/layout/Spacer'

SourceView source code

---

Related components

• Box,
• VStack,
• HStack,
• Grid

---

󰏖

View as Markdown

Vertical Spacer

Loading...

󰙡

Live Code

<VStack>
  <Box padding={2} background="bgAlternate" borderRadius="300">
    Box 1
  </Box>
  <Spacer vertical={2} />
  <Box padding={2} background="bgAlternate" borderRadius="300">
    Box 2
  </Box>
  <Spacer vertical={4} />
  <Box padding={2} background="bgAlternate" borderRadius="300">
    Box 3
  </Box>
  <Spacer vertical={6} />
  <Box padding={2} background="bgAlternate" borderRadius="300">
    Box 4
  </Box>
</VStack>

Horizontal Spacer

Loading...

󰙡

Live Code

<HStack>
  <Box padding={2} background="bgAlternate" borderRadius="300">
    Box 1
  </Box>
  <Spacer horizontal={2} />
  <Box padding={2} background="bgAlternate" borderRadius="300">
    Box 2
  </Box>
  <Spacer horizontal={4} display={{ base: 'none', tablet: 'block', desktop: 'block' }} />
  <Box
    padding={2}
    background="bgAlternate"
    borderRadius="300"
    display={{ base: 'none', tablet: 'block', desktop: 'block' }}
  >
    Box 3
  </Box>
  <Spacer horizontal={6} display={{ base: 'none', tablet: 'block', desktop: 'block' }} />
  <Box
    padding={2}
    background="bgAlternate"
    borderRadius="300"
    display={{ base: 'none', tablet: 'block', desktop: 'block' }}
  >
    Box 4
  </Box>
</HStack>