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.
Center with Inline
Use the inline prop to make Center behave like an inline element
(display: inline-flex) instead of a block-level element (display: flex).
This makes Center only take up as much width as its content needs, allowing it
to fit inside links, buttons, or other inline contexts without breaking the
layout.
Square
Square centers its child within a fixed-size container of equal width and
height. It accepts a size prop that sets both width and height to the same
value.
Circle
Circle extends Square by adding borderRadius="9999px" to create a perfect
circle. Like Square, it accepts a size prop that sets both width and height
to the same value.
Props
Center
| Prop | Default | Type |
|---|---|---|
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Square
| Prop | Default | Type |
|---|---|---|
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Circle
Circle extends Square and accepts all the same props. The only difference is
that Circle applies borderRadius="9999px".
| Prop | Default | Type |
|---|---|---|
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |