General purpose flexible box layout. This supports many, but not all, of the flexbox capabilities.

contents in a Box


a11yTitle {string}
Custom title used by screen readers. Defaults to 'Box'. Only used if onClick handler is specified.
align start|center|end| baseline|stretch
How to align the contents along the cross axis.
alignContent start|center|end| between|around|stretch
How to align the contents when there is extra space in the cross axis. Defaults to stretch
alignSelf start|center|end|stretch
How to align within its container along the cross axis.
appCentered true|false
Whether the box background should stretch across an App that is centered.
basis xsmall|small|medium|large| xlarge|xxlarge| full|1/2|1/3|2/3|1/4|3/4
Whether to use a fixed or relative size within its container.
colorIndex {category}-{index}
The color identifier to use for the background color. For example: 'neutral-1'. See Color for possible values.
direction row|column
The orientation to layout the child components in. Defaults to column.
focusable true|false
Whether keyboard focus should be added for clickable Boxes. Defaults to true.
flex true|grow|shrink|false
Whether flex-grow and/or flex-shrink is true.
full true|horizontal|vertical|false
Whether the width and/or height should take the full viewport size.
justify start|center|between|around|end
How to align the contents along the main axis.
onClick {function}
Optional click handler.
margin none|small|medium|large|{...}
The amount of margin around the box. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side of the box: {horizontal: none|small|medium|large, vertical: none|small|medium|large, top|left|right|bottom: none|small|medium|large}. Defaults to none.
pad none|small|medium|large|{...}
The amount of padding to put around the contents. An object can be specified to distinguish horizontal padding, vertical padding, and padding between child components: {horizontal: none|small|medium|large, vertical: none|small|medium|large, between: none|small|medium|large}. Defaults to none. Padding set using between only affects components based on the direction set (adds horizontal padding between components for row, or vertical padding between components for column).
primary true|false
Whether this is a primary Box that will receive skip to main content anchor. Defaults to false.
reverse true|false
Whether to reverse the order of the child components.
responsive true|false
Whether children laid out in a row direction should be switched to a column layout when the display area narrows. Defaults to true.
separator top|bottom|left|right| horizontal|vertical|all|none
Add a separator.
size auto|xsmall|small|medium|large| xlarge|xxlarge|full|...
The width of the Box. Defaults to auto. An object can be specified to distinguish width, height (with additional min and max options for width and height). E.g. {height: small, width: {max: large}}.
tag {string}
The DOM tag to use for the element. Defaults to div.
textAlign left|center|right
Set text-align for the Box contents.
texture {string}
A texture image URL to apply to the background.
wrap true|false
Whether children can wrap if they can't all fit. Defaults to false.