Box is the lowest-level component for binding theme-based styles to an individual element on the screen. Internally, all Balance components are made up of Boxes.
By default, Box renders a div element. You can customise this via the
prop. Non-Balance props will be forwarded to the underlying element.
<Box as="span" aria-hidden>...</Box>
The padding keys allow targeting each side as well as the x-axis and y-axis.
paddingXpadding-left and padding-right
paddingYpadding-top and padding-bottom
The margin keys allow targeting each side as well as the x-axis and y-axis.
marginXmargin-left and margin-right
marginYmargin-top and margin-bottom
Apply a border to the box:
Apply a border-radius to the box:
Apply a box-shadow to the box:
Apply a height to the box:
Apply a width to the box:
Mix and match style properties to achieve the desired aesthetic.
Instead of manually managing media queries and adding nested style objects throughout a code base, we offer a convenient shorthand syntax for adding responsive styles with a mobile-first approach.
Each of the above style props accepts a value or array of values. To skip
certain breakpoints, you can pass
null to any position in the array to avoid
generating unnecessary CSS.
While this approach has been widely adopted with great success, much like any new idea, it can seem odd or off-putting at first. We recommend giving it a chance.