This will be centered
import { Box, Center } from "@chakra-ui/react"
const Demo = () => {
return (
<Center bg="bg.emphasized" h="100px" maxW="320px">
<Box>This will be centered</Box>
</Center>
)
}
Usage
import { Center, Circle, Square } from "@chakra-ui/react"<Center bg="tomato" h="100px" color="white">
This is the Center
</Center>Examples
Icon
Center can be used to create frames around icons or numbers.
1
import { Box, Center, HStack } from "@chakra-ui/react"
import { LuPhone } from "react-icons/lu"
const Demo = () => {
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>
)
}
Center with Inline
Use the inline to change the display to inline-flex.
import { Box, Center, Link } from "@chakra-ui/react"
import { LuArrowRight } from "react-icons/lu"
const Demo = () => {
return (
<Link href="#">
<Center inline gap="4">
<Box>Visit Chakra UI</Box>
<LuArrowRight />
</Center>
</Link>
)
}
Square
Square centers its child given the size (width and height).
import { Square } from "@chakra-ui/react"
import { LuPhoneForwarded } from "react-icons/lu"
const Demo = () => {
return (
<Square size="10" bg="purple.700" color="white">
<LuPhoneForwarded />
</Square>
)
}
Circle
Circle centers its child given the size and creates a circle around it.
import { Circle } from "@chakra-ui/react"
import { LuPhoneForwarded } from "react-icons/lu"
const Demo = () => {
return (
<Circle size="10" bg="blue.700" color="white">
<LuPhoneForwarded />
</Circle>
)
}