Box

Table of contents

Default example
System props
Component props

The Box component serves as a wrapper component for most layout related needs. Use Box to set values such as display, width, height, and more. See the LAYOUT section of our System Props documentation for the full list of available props. In practice, this component is used frequently as a wrapper around other components to achieve Box Model related styling.

Default example

Box can be used to create both inline and

block-level elements,

elements with fixed or responsive width and height,

and more!

<Box>
 Box can be used to create both <Box as="span" bg="green.1">inline</Box> and
 <Box bg="blue.1">block-level elements,</Box>
 <Box bg="purple.1" width={[1, 1, 1/2]}>elements with fixed or responsive width and height,</Box>
 <Box bg="yellow.0" p={4} mt={2}>and more!</Box>
</Box>

<Box>
 Box can be used to create both <Box as="span" bg="green.1">inline</Box> and
 <Box bg="blue.1">block-level elements,</Box>
 <Box bg="purple.1" width={[1, 1, 1/2]}>elements with fixed or responsive width and height,</Box>
 <Box bg="yellow.0" p={4} mt={2}>and more!</Box>
</Box>

System props

Box components get the COMMON, LAYOUT, and FLEX categories of system props. Read our System Props doc page for a full list of available props.

Component props

Prop name	Type	Default	Description
as	String	`div`	sets the HTML tag for the component

Edit this page on GitHub

2 contributors

Last edited by BinaryMuse on April 14, 2020