Center

import { Box, Center } from "@chakra-ui/react"

export const CenterBasic = () => {
  return (
    <Center bg="bg.emphasized" h="100px" maxW="320px">
      <Box>This will be centered</Box>
    </Center>
  )
}

import { Box, Center, HStack } from "@chakra-ui/react"
import { LuPhone } from "react-icons/lu"

export const CenterWithIcons = () => {
  return (
    <HStack>
      <Center w="40px" h="40px" bg="tomato" color="white">
        <LuPhone />
      </Center>

      <Center w="40px" h="40px" bg="tomato" color="white">
        <Box as="span" fontWeight="bold" fontSize="lg">
          1
        </Box>
      </Center>
    </HStack>
  )
}

import { Box, Center, Link } from "@chakra-ui/react"
import { LuArrowRight } from "react-icons/lu"

export const CenterWithInline = () => {
  return (
    <Link href="#">
      <Center inline gap="4">
        <Box>Visit Chakra UI</Box>
        <LuArrowRight />
      </Center>
    </Link>
  )
}

import { Square } from "@chakra-ui/react"
import { LuPhoneForwarded } from "react-icons/lu"

export const CenterWithSquare = () => {
  return (
    <Square size="10" bg="purple.700" color="white">
      <LuPhoneForwarded />
    </Square>
  )
}

import { Circle } from "@chakra-ui/react"
import { LuPhoneForwarded } from "react-icons/lu"

export const CenterWithCircle = () => {
  return (
    <Circle size="10" bg="blue.700" color="white">
      <LuPhoneForwarded />
    </Circle>
  )
}

import { AbsoluteCenter, Box } from "@chakra-ui/react"
import { LuPhone } from "react-icons/lu"

export const CenterWithAbsolute = () => {
  return (
    <Box position="relative" h="100px">
      <AbsoluteCenter bg="tomato" p="4" color="white" axis="both">
        <LuPhone />
      </AbsoluteCenter>
    </Box>
  )
}