Spacer

Spacer description.

Props

Spacer properties

Property	Description	Type	Default
both	Should space be at the vertical axis?	`boolean`	false
bottom	Should space be at the bottom?	`boolean`	false
top	Should space be at the top?	`boolean`	false

Usage

Top

Dark Mode

camara.space

import { Box, Button, Spacer, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box width={300}>
      <Button block>No Spacing</Button>
      <Spacer top>
        <Button block>Spacing Top</Button>
      </Spacer>
    </Box>
  </BrowserWindow>
);

import { Box, Button, Spacer, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box width={300}>
      <Button block>No Spacing</Button>
      <Spacer top>
        <Button block>Spacing Top</Button>
      </Spacer>
    </Box>
  </BrowserWindow>
);

Bottom

Dark Mode

camara.space

import { Box, Button, Spacer, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box width={300}>
      <Spacer bottom>
        <Button block>Spacing Bottom</Button>
      </Spacer>
      <Button block>No Spacing</Button>
    </Box>
  </BrowserWindow>
);

import { Box, Button, Spacer, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box width={300}>
      <Spacer bottom>
        <Button block>Spacing Bottom</Button>
      </Spacer>
      <Button block>No Spacing</Button>
    </Box>
  </BrowserWindow>
);

Both

Dark Mode

camara.space

import { Box, Button, Spacer, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box width={300}>
      <Button block>No Spacing</Button>
      <Spacer both>
        <Button block>Spacing Both</Button>
      </Spacer>
      <Button block>No Spacing</Button>
    </Box>
  </BrowserWindow>
);

import { Box, Button, Spacer, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box width={300}>
      <Button block>No Spacing</Button>
      <Spacer both>
        <Button block>Spacing Both</Button>
      </Spacer>
      <Button block>No Spacing</Button>
    </Box>
  </BrowserWindow>
);

Spacer

Props

Usage

Top

Bottom

Both

On this page