Space

Space 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. It seamlessly adapts to different media queries.

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, two buttons have a space of 20px on extra small screens and 40px on large screens.

Properties