Circle

Atomic Props	CSS Properties
circle-{value} / circle={value}	width: {value}; height: {value}; border-radius: {value}

Usage

Result

Loading...

Live Editor

<Box toLeft> <Box circle-50 bgYellow200 toCenter> Hello </Box> <Box circle-5rem bgGreen200 toCenter> Hello </Box> <Box circle={100} bgBlue200 toCenter> Hello </Box> <Box circle="150px" bgPurple200 toCenter> Hello </Box> </Box>

<Box toLeft>
  <Box circle-50 bgYellow200 toCenter>
    Hello
  </Box>
  <Box circle-5rem bgGreen200 toCenter>
    Hello
  </Box>
  <Box circle={100} bgBlue200 toCenter>
    Hello
  </Box>
  <Box circle="150px" bgPurple200 toCenter>
    Hello
  </Box>
</Box>