Spacer

@coinbase/cds-web@8.13.6

Creates space between elements.

Import

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

SourceView source code

---

Related components

• Box,
• VStack,
• HStack,
• Grid

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} />
  <Box padding={2} background="bgAlternate" borderRadius="300">
    Box 3
  </Box>
  <Spacer horizontal={6} />
  <Box padding={2} background="bgAlternate" borderRadius="300">
    Box 4
  </Box>
</HStack>