Box

Example

Use the Box layout primitive to access Keystar design tokens.

Box example

Element type

By default, Box renders a div element. You can customise this using the elementType prop. Non-style props will be forwarded to the underlying element.

<Box elementType="section" id="element-type-example">
  ...
</Box>

Props

The Box accepts all the base style props, as well as the following:

Border

Name	Description
`border`	Shorthand for the element's border on all four sides. It sets the values of border-width, border-style, and border-color. See MDN.
`borderTop`	Shorthand for the top border. It sets the values of border-width, border-style, and border-color. See MDN.
`borderBottom`	Shorthand for the bottom border. It sets the values of border-width, border-style, and border-color. See MDN.
`borderStart`	Shorthand for the border on the logical start side, depending on the layout direction. It sets the values of border-width, border-style, and border-color. See MDN.
`borderEnd`	Shorthand for the border on the logical end side, depending on the layout direction. It sets the values of border-width, border-style, and border-color. See MDN.

Border color

Name	Description
`borderColor`	The color of the element's border on all four sides. See MDN.
`borderTopColor`	The color of the top border. See MDN.
`borderBottomColor`	The color of the bottom border. See MDN.
`borderStartColor`	The color of the border on the logical start side, depending on the layout direction. See MDN.
`borderEndColor`	The color of the border on the logical end side, depending on the layout direction. See MDN.

Border style

Name	Description
`borderStyle`	The style of the element's border on all four sides. See MDN.
`borderTopStyle`	The style of the top border. See MDN.
`borderBottomStyle`	The style of the bottom border. See MDN.
`borderStartStyle`	The style of the border on the logical start side, depending on the layout direction. See MDN.
`borderEndStyle`	The style of the border on the logical end side, depending on the layout direction. See MDN.

Border width

Name	Description
`borderWidth`	The width of the element's border on all four sides. See MDN.
`borderTopWidth`	The width of the top border. See MDN.
`borderBottomWidth`	The width of the bottom border. See MDN.
`borderStartWidth`	The width of the border on the logical start side, depending on the layout direction. See MDN.
`borderEndWidth`	The width of the border on the logical end side, depending on the layout direction. See MDN.

Border radius

Name	Description
`borderRadius`	The border radius on all four sides of the element. See MDN.
`borderTopStartRadius`	The border radius for the top start corner of the element, depending on the layout direction. See MDN.
`borderTopEndRadius`	The border radius for the top end corner of the element, depending on the layout direction. See MDN.
`borderBottomStartRadius`	The border radius for the bottom start corner of the element, depending on the layout direction. See MDN.
`borderBottomEndRadius`	The border radius for the bottom end corner of the element, depending on the layout direction. See MDN.

Padding

Name	Description
`padding`	Sets the padding on all four sides of the element. See MDN.
`paddingX`	Sets the padding on the left and right sides of the element. See MDN.
`paddingY`	Sets the padding on the top and bottom sides of the element. See MDN.
`paddingTop`	Sets the padding on the top side of the element. See MDN.
`paddingBottom`	Sets the padding on the bottom side of the element. See MDN.
`paddingStart`	Sets the padding on the logical start side of the element, depending on layout direction. See MDN.
`paddingEnd`	Sets the padding on the logical end side of the element, depending on layout direction. See MDN.

Other

Name	Description
`backgroundColor`	The background color for the element. See MDN.
`boxShadow`	Adds shadow effects around an element's frame. See MDN.
`cursor`	The type of mouse cursor, if any, to show when the mouse pointer is over an element. See MDN
`opacity`	The opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. See MDN
`overflow`	Specify what to do when the element's content is too long to fit its size. See MDN.
`pointerEvents`	Sets under what circumstances (if any) a particular element can become the target of pointer events. See MDN.
`userSelect`	Controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes. See MDN.