Skip to main content

Spacer

Spacer is a flexible space filler for flex layouts. It expands to fill available space, useful for pushing items apart.

Import​

import { Spacer } from "@tosui/react";

Basic Usage​

<HStack p={4} bg="surface" border="thin" borderColor="border">
  <Box p={2} bg="primary-subtle">Left</Box>
  <Spacer />
  <Box p={2} bg="accent-subtle">Right</Box>
</HStack>

Multiple Spacers​

Use multiple spacers to distribute items evenly.

<HStack p={4} bg="surface" border="thin" borderColor="border">
  <Box p={2} bg="primary-subtle">Left</Box>
  <Spacer />
  <Box p={2} bg="accent-subtle">Center</Box>
  <Spacer />
  <Box p={2} bg="success-subtle">Right</Box>
</HStack>

Vertical Spacer​

<VStack h="200px" p={4} bg="surface" border="thin" borderColor="border">
  <Box p={2} bg="primary-subtle">Top</Box>
  <Spacer />
  <Box p={2} bg="accent-subtle">Bottom</Box>
</VStack>

Common Patterns​

<HStack as="nav" p={4} bg="surface" border="thin" borderColor="border">
  <Box fontWeight="bold">Logo</Box>
  <Spacer />
  <HStack gap={4}>
    <Link href="#">Home</Link>
    <Link href="#">About</Link>
    <Link href="#">Contact</Link>
  </HStack>
</HStack>
<Card>
  <CardBody>
    <Text>Card content</Text>
  </CardBody>
  <CardFooter>
    <HStack>
      <Text fontSize="sm" color="foreground-muted">Last updated: Today</Text>
      <Spacer />
      <Button size="sm">View Details</Button>
    </HStack>
  </CardFooter>
</Card>
<Modal isOpen={isOpen} onClose={onClose}>
  <ModalHeader>Confirm Action</ModalHeader>
  <ModalBody>Are you sure you want to proceed?</ModalBody>
  <ModalFooter>
    <HStack>
      <Spacer />
      <Button variant="ghost" onClick={onClose}>Cancel</Button>
      <Button>Confirm</Button>
    </HStack>
  </ModalFooter>
</Modal>

Props Reference​

PropTypeDefaultDescription
asElementType"div"HTML element to render

Spacer accepts all Box props except flex (which is fixed at 1).

When to Use​

  • Use Spacer when you need flexible space that fills remaining room in a flex container
  • Use gap when you need fixed, consistent spacing between items
  • Use margin when you need fixed spacing on a specific element

TypeScript​

import { Spacer, type SpacerProps, type SpacerOwnProps } from "@tosui/react";