Box

View Source

Box is the primitive component that other components build from. It is responsible for processing all style props.

Box with padding and a background color.

Copy

Edit

render(
  <Box padding={2} backgroundColor="blue-5" color="white">
    Box with padding and a background color.
  </Box>
)

render(
  <Box padding={2} backgroundColor="blue-5" color="white">
    Box with padding and a background color.
  </Box>
)

Props

asany

Render custom component or HTML element tag.

Gain access to the internal ref

inlineboolean

If true, sets “display: inline-block”, otherwise it defaults to “display: block”

visibleboolean

Controls display property. If false sets display: none, otherwise defaults to initial display value.