import {Box} from '@primer/react'
<Box borderColor="border.default" borderWidth={1} borderStyle="solid" p={3}>Hello</Box>
<Box borderColor="border.default" borderBottomWidth={1} borderBottomStyle="solid" pb={3}>Hello</Box>
Use Box to create flexbox layouts.
<Box display="flex"><Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">1</Box><Box flexGrow={1} p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">2</Box><Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">3</Box></Box>
Use Box to create grid layouts.
<Box display="grid" gridTemplateColumns="1fr 1fr" gridGap={3}><Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">1</Box><Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">2</Box><Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">3</Box></Box>
| Name | Type | Default | Description |
|---|---|---|---|
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. | |
| as | React.ElementType | "div" | The underlying element to render — either a HTML element name or a React component. |
| ref | React.RefObject<HTMLDivElement> | A ref to the element rendered by this component. Because this component is polymorphic, the type will vary based on the value of the as prop. | |
Additional props are passed to the <div> element. See for a list of props accepted by the <div> element. If an as prop is specified, the accepted props will change accordingly. | |||
Box also accepts all styled system props.