Box

Best practices

Use the theme based parameters when possible, this will prevent discrepancies should the theme update in the future.

Basic usage

The Box component is a generic component intended to be used for spacing and alignment within an application.

• The default Box is a div element but can be swapped for any element type using the as="dd" prop.
• The only built-in style is box-sizing: border-box for intuitive sizing.
• With the Box you have the ability to make the box conform to the shape set in the theme just like most of the rest of the cactus components do. To do this, just set borderRadius="themed".
• You can also pass in custom border radius definitions to change with the theme. To do this, you can set borderRadius={{ square: '2px', intermediate: '6px', round: '12px' }}. You can customize each individual corner this way as well, using borderTopLeftRadius, borderTopRightRadius, and so on.

Try it out

<Box
  display='initial'
  margin={3}
  padding={4}
  width='120px'
  height= '120px'
  backgroundColor='lightContrast'
  color='darkestContrast'
  borderColor='darkestContrast'
  borderWidth='2px'
  borderStyle='solid'
  >
  Example Content
</Box>

import React from 'react'
import { Box, Button } from '@repay/cactus-web'

/**
 *  center a button in it's container using margin = 0 auto
 *  and setting padding top and bottom to the 3rd
 *  space with the `ph` prop
 */
export default () => (
  <Box ph={3} margin="0 auto">
    <Button variant="action">Click Me!</Button>
  </Box>
)

Properties