Spacer
The Spacer component is a flexible layout tool in Pearl UI that allows you to create adjustable, empty spaces. It is primarily used to manage and fine-tune the spacing between sibling elements in your layout. By default, it renders a Box element.
Import#
import { Spacer } from "pearl-ui";Usage#
Horizontal Spacing#
<Box flexDirection="row"> <Box p="6" bgColor="danger.400"> <Text>Box 1</Text> </Box> <Spacer /> <Box p="6" bgColor="success.400"> <Text>Box 2</Text> </Box></Box>Vertical Spacing#
<Box flex={1}> <Box p="6" bgColor="danger.400"> <Text>Box 1</Text> </Box> <Spacer /> <Box p="6" bgColor="success.400"> <Text>Box 2</Text> </Box></Box>Example#
Component Properties#
Supported Style Properties#
The Spacer component is built on top of the Box component, which means you can pass all Box related props to it.