# Box

## Specification

Box is a primitive component that distributes alignment and spacing.

{% hint style="warning" %}
Box has no control over elements' composition. **Use** [**Composition**](https://redd.gitbook.io/atomic-layout/api/components/composition) **instead**.
{% endhint %}

## Props

Box supports all [Prop aliases](https://redd.gitbook.io/atomic-layout/fundamentals/prop-aliases), *except* those specific to CSS Grid.

| Prop name | Type      | Description              |
| --------- | --------- | ------------------------ |
| `flex`    | `boolean` | Display a box as `flex`. |
| `inline`  | `boolean` | Uses inline display.     |

## Example

{% code title="" %}

```jsx
import React from 'react'
import { Box } from 'atomic-layout'

export const Header = ({ children }) => (
  <Box as="header" padding={10} paddingMd={20}>
    {children}
  </Box>
)
```

{% endcode %}