Skip to main content

Spacer

Spacer is a layout component that creates an adjustable, empty space that can be used to tune the spacing between sibling elements. By default, it renders a Box element.

Import#

import { Spacer } from "pearl-ui";

Usage#

Horizontal Spacing#

<Box flexDirection="row">  <Box p="l" bg="danger.400">    <Text>Box 1</Text>  </Box>  <Spacer />  <Box p="l" bg="success.400">    <Text>Box 2</Text>  </Box></Box>

Vertical Spacing#

<Box flex={1}>  <Box p="l" bg="danger.400">    <Text>Box 1</Text>  </Box>  <Spacer />  <Box p="l" bg="success.400">    <Text>Box 2</Text>  </Box></Box>

Example#

Props#

Supported style props#

Spacer composes Box so you can pass all Box related props.