Custom label to be used by screen readers. When provided, an aria-label will be added to the element.
"a user friendly label for screen readers"
How to align the contents when there is extra space in the cross axis.
"start"
"center"
"end"
"between"
"around"
"stretch"
How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
"start"
"center"
"end"
"stretch"
Animation effect(s) to use. 'duration' and 'delay' should be in milliseconds. 'jiggle' and 'pulse' types are intended for small elements, like icons.
"fadeIn"
"fadeOut"
"jiggle"
"pulse"
"slideUp"
"slideDown"
"slideLeft"
"slideRight"
"zoomIn"
"zoomOut"
{
"type": "...",
"delay": 0,
"duration": 1000,
"size": "xsmall"
}
["fadeIn", "slideDown", "..."]
Either a color identifier to use for the background color. For example: 'neutral-1'. Or, a 'url()' for an image. Dark is not needed if color is provided.
"neutral-1"
"url(//my.com/assets/img.png)"
{
"color": "neutral-1",
"dark": true,
"opacity": true,
"position": "bottom",
"repeat": "no-repeat",
"size": "cover",
"image": "url(//my.com/assets/img.png)"
}
{"dark": "light-2", "light": "dark-2"}
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"full"
"1/2"
"1/3"
"2/3"
"1/4"
"2/4"
"3/4"
"auto"
Include a border. 'between' will place a border in the gap between child elements. You must have a 'gap' to use 'between'.
true
false
"top"
"left"
"bottom"
"right"
"between"
"horizontal"
"vertical"
"all"
{
"color": "border",
"size": "medium",
"style": "dashed",
"side": "all"
}
Elevated height above the underlying context, indicated via a drop shadow.
"none"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"any custom elevation name in the current theme"
The amount of spacing between child elements. This should not be used in conjunction with 'wrap' as the gap elements will not wrap gracefully. If a child is a Fragment, Box will not add a gap between the children of the Fragment.
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"any CSS size"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"xxlarge"
{"min": "...", "max": "..."}
"any CSS size"
When 'onClick' has been specified, the hover indicator to apply when the user is mousing over the box.
The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
"xsmall"
"small"
"medium"
"large"
"xlarge"
{
"vertical": "...",
"horizontal": "...",
"top": "...",
"bottom": "...",
"left": "...",
"right": "..."
}
Click handler. Setting this property adds additional attributes to the DOM for accessibility.
"auto"
"hidden"
"scroll"
"visible"
"any CSS overflow"
{"vertical": "...", "horizontal": "..."}
The amount of padding around the box contents. An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side of the box
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"any CSS size"
{
"vertical": "...",
"horizontal": "...",
"top": "...",
"bottom": "...",
"left": "...",
"right": "..."
}
true
false
"xsmall"
"small"
"medium"
"large"
"xlarge"
"full"
"any CSS size"
{"size": "...", "corner": "top-left"}
The DOM tag to use for the element. NOTE: This is deprecated in favor of indicating the DOM tag via the 'as' property.
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"xxlarge"
{"min": "...", "max": "..."}
"any CSS size"
{
"duration": "1s",
"jiggle": {"duration": "0.1s"}
}
{
"xsmall": "1px",
"small": "2px",
"medium": "4px",
"large": "12px",
"xlarge": "24px"
}
{
"light": {
"none": "none",
"xsmall": "0px 1px 2px rgba(0, 0, 0, 0.20)",
"small": "0px 2px 4px rgba(0, 0, 0, 0.20)",
"medium": "0px 4px 8px rgba(0, 0, 0, 0.20)",
"large": "0px 8px 16px rgba(0, 0, 0, 0.20)",
"xlarge": "0px 12px 24px rgba(0, 0, 0, 0.20)"
},
"dark": {
"none": "none",
"xsmall": "0px 2px 2px rgba(255, 255, 255, 0.40)",
"small": "0px 4px 4px rgba(255, 255, 255, 0.40)",
"medium": "0px 6px 8px rgba(255, 255, 255, 0.40)",
"large": "0px 8px 16px rgba(255, 255, 255, 0.40)",
"xlarge": "0px 12px 24px rgba(255, 255, 255, 0.40)"
}
}
{
"dark": "rgba(255,255,255,0.33)",
"light": "rgba(0,0,0,0.33)"
}
{"dark": "white", "light": "black"}
{
"xxsmall": "48px",
"xsmall": "96px",
"small": "192px",
"medium": "384px",
"large": "768px",
"xlarge": "1152px",
"xxlarge": "1536px",
"full": "100%"
}
The actual breakpoint to trigger changes in the border, direction, gap, margin, pad, and round.
"small"
{
"none": "0px",
"hair": "1px",
"xxsmall": "3px",
"xsmall": "6px",
"small": "12px",
"medium": "24px",
"large": "48px",
"xlarge": "96px",
"responsiveBreakpoint": "small"
}
The possible breakpoints that could affect border, direction, gap, margin, pad, and round.
{
"small": {
"value": 768,
"borderSize": {
"xsmall": "1px",
"small": "2px",
"medium": "4px",
"large": "6px",
"xlarge": "12px"
},
"edgeSize": {
"none": "0px",
"hair": "1px",
"xxsmall": "2px",
"xsmall": "3px",
"small": "6px",
"medium": "12px",
"large": "24px",
"xlarge": "48px"
},
"size": {
"xxsmall": "24px",
"xsmall": "48px",
"small": "96px",
"medium": "192px",
"large": "384px",
"xlarge": "768px",
"full": "100%"
}
},
"medium": {"value": 1536},
"large": {}
}