Skip to content

Box

Box is a composition of several high-level layout components which provides spacing, layout, and color helpers.
  • Box returns a div by default, but the component prop can be used to return any valid HTML element; all valid HTML attributes will be forwarded to the DOM element.
  • Box is a generic building block intended to replace the Bootstrap-era helper classes that we want to maintain. It is designed to apply simple, opinionated CSS customizations, including:
    • Borders
    • Colors
    • Flexbox
    • CSS Grid
    • Layout
    • Spacing
    • Typography
  • Box taps into our design tokens to apply opinionated values for colors and spacing:
    • Spacing units are expressed in increments of our spacing unit (4px), and are converted into REM units.
    • Color values are expressed by our color palette, although they are formatted using dot notation rather than hyphenation.
  • Each prop tagged as a “responsive property” contains a corresponding set of props for each breakpoint. For example:
    • width: Base
    • widthSm: Small and above
    • widthMd: Medium and above
    • widthLg: Large and above
    • widthXl: Extra large and above
    Read more about our responsive breakpoints »
  • Flex and Grid are re-exports of Box with the display property set to flex or grid respectively.They can accept any of Box’s props.
  • FlexItem, GridItem, Skeleton, and Typography implement Box as their root element and can therefore accept all Box props.
React props
NameTypeDefaultDescription
children  ReactNodefunctionThe content of the component or a function used to render the component.
component  ElementTypedivHTML element to render.

Box is a composition of several sub-components, each with their own collection of props to modify themed CSS properties.

The table below provides a reference as to which sub-component controls which behavior.

You can find the full prop table on Storybook.

Box sub-components
Sub-componentPurpose
BorderSets values related to borders, including border-radius.
ColorSets the color value for text content and background-color for elements.
FlexSets flexbox properties on the flex container (parent) element.
FlexItemSets flexbox properties on the flex items (children).
GridSets CSS grid properties on the grid container (parent) element.
GridItemSets CSS grid properties on the grid items (children).
LayoutSets properties related to setting dimensions and visibility of components, including the display and vertical-align properties.
SpacingSets properties related to spacing, such as padding and margin.
TypographySets text alignment via the text-align property.
  • Box is a flexible component that can take many shapes, so we have not baked in any specific accessibility features
  • Engineers are encouraged to leverage appropriate HTML attributes when using Box