Box
Fidely UI Box is a simple div tag with styled system.
I'm a Box
import { Box } from '@fidely-ui/react/box'
export const BoxBasic = () => {
return (
<Box
boxSize={'200px'}
bg={'orange.9'}
padding={'10px'}
textAlign={'center'}
justifyContent={'center'}
flexDirection={'column'}
display={'flex'}
>
I'm a Box
</Box>
)
}
Usage
import { Box } from '@fidely-ui/react'<Box>Hey there</Box>asChild
Use the asChild prop to forward the styles to the child component or as another element.
Hey child element
import { Box, Text } from '@fidely-ui/react'
export const BoxAsChild = () => {
return (
<Box asChild background={'bg.emphasized'} padding={'10px'}>
<Text>Hey child element</Text>
</Box>
)
}
Using as Prop
By default Box renders as div tag to change the default element use the as prop to change the element
Note: every Fidely ui component accept the as prop
<Box as="p">Paragraph element</Box>
<Box as="h1">Heading element</Box>
<Box as="span">Span element</Box>
<Box as="section">Section element</Box>
<Box as="article">Article element</Box>