Center

1
import { Box, Center } from "styled-system/jsx";
2

3
const Demo = () => {
4
  return (
5
    <Center bg="page.surface.100" h="100px" maxW="320px">
6
      <Box>This will be centered</Box>
7
    </Center>
8
  )
9
}

1
import { Center } from "styled-system/jsx";

1
<Center bg="tomato" h="100px" color="white">
2
  This is the Center
3
</Center>

1
import { Center, HStack } from "styled-system/jsx"
2
import { Text } from "@cerberus/react"
3
import { LuPhone } from "react-icons/lu"
4

5
const Demo = () => {
6
  return (
7
    <HStack>
8
      <Center w="40px" h="40px" bg="tomato" color="white">
9
        <LuPhone />
10
      </Center>
11

12
      <Center w="40px" h="40px" bg="tomato" color="white">
13
        <Text as="span" fontWeight="bold" fontSize="lg">
14
          1
15
        </Text>
16
      </Center>
17
    </HStack>
18
  )
19
}

1
import { Center } from "styled-system/jsx"
2
import { Text } from "@cerberus/react"
3

4
const Demo = () => {
5
  return (
6
    <Center inline bg="page.surface.100" h="100px" maxW="320px">
7
      <Text>This will be centered</Text>
8
    </Center>
9
  )
10
}

1
import { Square } from "styled-system/jsx"
2
import { LuPhoneForwarded } from "react-icons/lu"
3

4
const Demo = () => {
5
  return (
6
    <Square size="10" bg="purple.700" color="white">
7
      <LuPhoneForwarded />
8
    </Square>
9
  )
10
}

1
import { Circle } from "styled-system/jsx"
2
import { LuPhoneForwarded } from "react-icons/lu"
3

4
const Demo = () => {
5
  return (
6
    <Circle size="10" bg="purple.700" color="white">
7
      <LuPhoneForwarded />
8
    </Circle>
9
  )
10
}