Radix2Solid

Box

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

<Box width="64px" height="64px">

	<DecorativeBox />

</Box>

API Reference

This component is based on the div element and supports common margin props.

Only the display prop values are unique to the Box component.

PropTypeDefault
as"div" | "span""div"
asChildboolean—
displayResponsive<enum>—

The following props are shared between Box, Flex, Grid, Container and Section components. Read more about layout components in Layout.

PropTypeDefault
pResponsive<enum | string>—
pxResponsive<enum | string>—
pyResponsive<enum | string>—
ptResponsive<enum | string>—
prResponsive<enum | string>—
pbResponsive<enum | string>—
plResponsive<enum | string>—
widthResponsive<string>—
minWidthResponsive<string>—
maxWidthResponsive<string>—
heightResponsive<string>—
minHeightResponsive<string>—
maxHeightResponsive<string>—
positionResponsive<enum>—
insetResponsive<enum | string>—
topResponsive<enum | string>—
rightResponsive<enum | string>—
bottomResponsive<enum | string>—
leftResponsive<enum | string>—
overflowResponsive<enum>—
overflowXResponsive<enum>—
overflowYResponsive<enum>—
flexBasisResponsive<string>—
flexShrinkResponsive<enum | string>—
flexGrowResponsive<enum | string>—
gridAreaResponsive<string>—
gridColumnResponsive<string>—
gridColumnStartResponsive<string>—
gridColumnEndResponsive<string>—
gridRowResponsive<string>—
gridRowStartResponsive<string>—
gridRowEndResponsive<string>—
alignSelfResponsive<enum>—
justifySelfResponsive<enum>—