Skip to content

Spacer

Adds spacing between nodes. If no size is specified, it will span between the nodes.

Usage

Code

import { createSystem } from 'frog/ui'
 
const { Box, Spacer } = createSystem()
 
function Example() {
  return (
    <Box gap="8" grow> 
      <Box backgroundColor="red" height="20" width="100%" /> 
      <Spacer />
      <Box backgroundColor="red" height="20" width="100%" /> 
      <Spacer size="20" />
      <Box backgroundColor="red" height="20" width="100%" /> 
    </Box> 
  )
}

`Spacer` Properties

`size`

Spacing size.

Code

<Spacer size="0
1
2
3
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
52
56
60
64
72
80
96
128
160
192
224
25620" />