Background Color

Atomic props for controlling the background color of an element.

Atomic Props	CSS Properties
bg{colorName}	background-color: {color};
bg={color}	background-color: {color};

Usage preset color

Use bg{colorName} props to control the background color of an element.

Result

Loading...

Live Editor

<Box toEvenly> <Box rounded-8 square-100 bgGreen400></Box> <Box rounded-8 square-100 bgBlue400></Box> <Box rounded-8 square-100 bgPurple400></Box> </Box>

<Box toEvenly>
  <Box rounded-8 square-100 bgGreen400></Box>
  <Box rounded-8 square-100 bgBlue400></Box>
  <Box rounded-8 square-100 bgPurple400></Box>
</Box>

Custom color

Set any background color using bg={value} props.

Result

Loading...

Live Editor

<Box toEvenly> <Box rounded-8 square-100 bg="#ed8936"></Box> <Box rounded-8 square-100 bg="rgba(44,200, 400)"></Box> <Box rounded-8 square-100 bg="indigo"></Box> </Box>

<Box toEvenly>
  <Box rounded-8 square-100 bg="#ed8936"></Box>
  <Box rounded-8 square-100 bg="rgba(44,200, 400)"></Box>
  <Box rounded-8 square-100 bg="indigo"></Box>
</Box>