@atlaskit/primitives/constellation/box/usage.mdx

Primitives are token-backed low-level building blocks.

---
title: Box
description: A box is a generic container that provides managed access to design tokens.
order: 2
---

A box is a generic container that provides convenient and managed access to design tokens, and built-in guidance for the best practices of the Atlassian Design System. Use box in conjunction with other layout components such as [inline](/components/primitives/inline/usage) and [stack](/components/primitives/stack/usage) to easily create customized layouts.

Use a box to compose layouts and add styling to child elements through visual props, including spacing and color through design tokens.

## Using box

To identify usages of box in a given design, look for where a UI element will receive some visual styles applied to a container. Box can be used on a range of sizes of elements, from buttons to section wrappers.

Box, being generic in nature, can be "over-used", so it’s important to consider situations where more specific and expressive primitives could be used. For example, use [inline](/components/primitives/inline/usage) and [stack](/components/primitives/stack/usage) to manage horizontal and vertical layouts, respectively.

## Styling

Display behavior is set by using the available props or using [XCSS](/components/primitives/xcss/usage). Makers can make design decisions for box by setting:

- `padding`
- `paddingInline`
- `paddingInlineStart`
- `paddingInlineEnd`
- `paddingBlock`
- `paddingBlockStart`
- `paddingBlockEnd`
- `backgroundColor`

## Related

- [Manage horizontal layout using an inline component](/components/primitives/inline/usage)
- [Manage vertical layout using a stack component](/components/primitives/stack/usage)
- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)