Box

A box is a primitive component that you can use to create your own unique UI within the Add-ons framework. Due to the architecture of Add-ons, you will not be able to create your own HTML elements such as <div> or <span>.

The solution to that is the <Box> component. This is based on the areas of the box model. It contains convenient parameters to adjust the padding, margins, and border of your component.

Component render

<Box borderLine="10" borderRadius="10" margin="100" padding="200">
  This is a box.
</Box>

Spacing

All spacing, whether it’s margins or padding, is defined in 8px increments. If you set your padding to "100", that means your padding is set to 8px. If you set your padding to "200", your padding is set to 16px, and so on.

Properties

Property	Type	Description
alignment	"start" "end" "center" "baseline"	Box alignment. These are similar to the flexbox align-items properties. This only works when the layout property is set to horizontal or vertical
borderLine	"10" "20" "30" "40" "50"	The type of line available for borders of elements. This is defined in color weights starting at 10 and ending at 50.
borderLineBottom	"10" "20" "30" "40" "50"	Sets the border line on the bottom of the element. This is defined in color weights starting at 10 and ending at 50.
borderLineLeft	"10" "20" "30" "40" "50"	Sets the border line on the left of the element. This is defined in color weights starting at 10 and ending at 50.
borderLineRight	"10" "20" "30" "40" "50"	Sets the border line on the right of the element. This is defined in color weights starting at 10 and ending at 50.
borderLineTop	"10" "20" "30" "40" "50"	Sets the border line on the top of the element. This is defined in color weights starting at 10 and ending at 50.
borderRadius	"0" "10" "20"	The radius of the border of the element. This is defined in multiples of 6px, where 10 is 6px, and 20 is 12px.
borderRadiusBottomLeft	"0" "10" "20"	The bottom-left border radius of the element. This is defined in multiples of 6px, where 10 is 6px, and 20 is 12px.
borderRadiusBottomRight	"0" "10" "20"	The bottom-right border radius of the element. This is defined in multiples of 6px, where 10 is 6px, and 20 is 12px.
borderRadiusTopLeft	"0" "10" "20"	The top-left border radius of the element. This is defined in multiples of 6px, where 10 is 6px, and 20 is 12px.
borderRadiusTopRight	"0" "10" "20"	The top-right border radius of the element. This is defined in multiples of 6px, where 10 is 6px, and 20 is 12px.
children	string	The text to display in the box.
height	${number}$ min max fit	Allows setting explicit heights for the element. ${number} takes any percentage for the element height, min and max values for getting content as small as possible or setting the maximum possible height of the content in the component, respectively, and fit fills the available space up to the maximum size of the content.
justify	"start" "end" "center" "space-between" "space-around" "space-evenly" "stretch"	Box justification. These are similar to the flexbox justify-content properties. This only works when the layout property is set to horizontal or vertical
layout	"horizontal" "vertical" "block"	The Box layout. A block layout is a standard display: block element. A horizontal and vertical layout is a flexbox where the flex-direction property is either row or column respectively.
margin	"0" "25" "50" "75" "100" "150" "200" "300" "400" "500" "600" "700" "800" "900" "1000" "2000"	This property sets the margin on all sides of the Box. Margins are defined in multiples of 8px, where 100 is 8px. Margins specify the space outside of the element.
marginBottom	"0" "25" "50" "75" "100" "150" "200" "300" "400" "500" "600" "700" "800" "900" "1000" "2000"	This property sets the margin on the bottom side of the Box. Margins are defined in multiples of 8px, where 100 is 8px. Margins specify the space outside of the element.
marginLeft	"0" "25" "50" "75" "100" "150" "200" "300" "400" "500" "600" "700" "800" "900" "1000" "2000"	This property sets the margin on the left side of the Box. Margins are defined in multiples of 8px, where 100 is 8px. marginBottom specifies the bottom space outside of the element.
marginRight	"0" "25" "50" "75" "100" "150" "200" "300" "400" "500" "600" "700" "800" "900" "1000" "2000"	This property sets the margin on the right side of the Box. Margins are defined in multiples of 8px, where 100 is 8px. marginBottom specifies the bottom space outside of the element.
marginTop	"0" "25" "50" "75" "100" "150" "200" "300" "400" "500" "600" "700" "800" "900" "1000" "2000"	This property sets the margin on the top side of the Box. Margins are defined in multiples of 8px, where 100 is 8px. marginBottom specifies the bottom space outside of the element.
padding	"0" "25" "50" "75" "100" "150" "200" "300" "400" "500" "600" "700" "800" "900" "1000" "2000"	This property sets the padding on all sides of the Box. Padding is defined in multiples of 8px, where 100 is 8px. Padding specifies the space outside of the element.
paddingBottom	"0" "25" "50" "75" "100" "150" "200" "300" "400" "500" "600" "700" "800" "900" "1000" "2000"	This property sets the padding on the bottom side of the Box. Padding is defined in multiples of 8px, where 100 is 8px. Padding specifies the space outside of the element.
paddingLeft	"0" "25" "50" "75" "100" "150" "200" "300" "400" "500" "600" "700" "800" "900" "1000" "2000"	This property sets the padding on the left side of the Box. Padding is defined in multiples of 8px, where 100 is 8px. Padding specifies the space outside of the element.
paddingRight	"0" "25" "50" "75" "100" "150" "200" "300" "400" "500" "600" "700" "800" "900" "1000" "2000"	This property sets the padding on the right side of the Box. Padding is defined in multiples of 8px, where 100 is 8px. Padding specifies the space outside of the element.
paddingTop	"0" "25" "50" "75" "100" "150" "200" "300" "400" "500" "600" "700" "800" "900" "1000" "2000"	This property sets the padding on the top side of the Box. Padding is defined in multiples of 8px, where 100 is 8px. Padding specifies the space outside of the element.
slot	string	An optional slot attribute that can be added to the component. Certain components require the slot attribute to properly place it. For more information, see architecture
width	${number}$ min max fit	Allows setting explicit widths for the element. ${number} takes any percentage for the element width, min and max values for getting content as small as possible or setting the maximum possible width of the content in the component, respectively, and fit fills the available space up to the maximum size of the content.
wrap	wrap nowrap wrap-reverse	A wrap property, similar to the flex-wrap property in CSS Flexbox. This property defines how elements should wrap when they reach the end of the container.