Space - Develop

Space is our favorite component. It is an element that allows you to create spaces between elements. Whether you need horizontal or vertical spacing, the Space component has got you covered. Additionally, it seamlessly adapts to different media queries, making it a versatile and powerful tool for layout and design.


import React from "react";
import { Container, Button, Space } from "cherry-styled-components";

export default function Page() {
  return (
    <Container>
      <Button>Button</Button>
      <Space xs={20} lg={40} />
      <Button>Button</Button>
    </Container>
  );
}

In the example above we have two buttons with a space of 20px on extra small screens and 40px on large screens.

Properties

Property	Description
size?	number
$xs?	number
$sm?	number
$md?	number
$lg?	number
$xl?	number
$xxl?	number
$xxxl?	number
$horizontal?	boolean

Explore the source code on GitHub:

Space