Box
A box is a generic container that provides managed access to design tokens.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 and stack 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 and stack to manage horizontal and vertical layouts, pressable to build custom buttons, or anchor to build custom links.
Styling
Display behavior is set by using the available props or using cssMap. Makers can make design decisions for box by setting:
paddingpaddingInlinepaddingInlineStartpaddingInlineEndpaddingBlockpaddingBlockStartpaddingBlockEndbackgroundColor