@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, [pressable](/components/primitives/pressable/usage) to build
custom buttons, or [anchor](/components/primitives/anchor/usage) to build custom links.

## 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)
- [Build custom buttons using a pressable component](/components/primitives/pressable/usage)
- [Build custom links using an anchor component](/components/primitives/anchor/usage)
- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)