---
name: Box
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import Box from './Box'
import cactusTheme from '@repay/cactus-theme'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# 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

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

<LiveProvider code={code} scope={{ Box }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <div style={{ marginTop: '50px' }}>
    <LivePreview />
  </div>
</LiveProvider>

```jsx
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

<PropsTable of={Box} />