import { Center } from 'styled-system/jsx';The Center pattern is used to center the content of a container.
import { DecorativeBox } from '@/app/components/decorative-box'
import { Center } from 'styled-system/jsx'
export function BasicDemo() {
return (
<Center h="100px" maxW="320px">
<DecorativeBox p="sm">This is centered</DecorativeBox>
</Center>
)
}
Center can be used to create frames around icons or numbers.
import { Center, HStack } from 'styled-system/jsx'
import { Text } from '@cerberus/react'
import { Phone } from '@carbon/icons-react'
export function IconDemo() {
return (
<HStack>
<Center w="40px" h="40px" bg="tomato" color="white">
<Phone />
</Center>
<Center w="40px" h="40px" bg="tomato" color="white">
<Text as="span" fontWeight="bold" fontSize="lg">
1
</Text>
</Center>
</HStack>
)
}
Use the inline to change the display to inline-flex.
This will be centered
import { Center } from 'styled-system/jsx'
import { Text } from '@cerberus/react'
import { Phone } from '@carbon/icons-react'
export function InlineDemo() {
return (
<Center inline bg="page.bg.100" gap="sm" h="100px" maxW="320px" px="md">
<Phone />
<Text>This will be centered</Text>
</Center>
)
}
Square centers its child given the size (width and height).
import { PhoneIncoming } from '@carbon/icons-react'
import { Square } from 'styled-system/jsx'
export function SquareDemo() {
return (
<Square size="10" bg="purple.700" color="white">
<PhoneIncoming />
</Square>
)
}
Circle centers its child given the size and creates a circle around it.
import { PhoneBlock } from '@carbon/icons-react'
import { Circle } from 'styled-system/jsx'
export function CircleDemo() {
return (
<Circle size="10" bgColor="danger.bg.initial" color="danger.text.100">
<PhoneBlock />
</Circle>
)
}
Center accepts CSS properties and the following specific props:
| Prop | Type | Description |
|---|---|---|
inline | boolean | Changes the display to inline-flex. |
size | string | Sets the width and height of the element. |
On this page