🍔
Box
Renders an individual
div element with quick access to the standard padding and negative margin scales, as well as other common layout properties.Box is a low-level primitive that should only be used when building design system components, or when other layout primitives (such as: Rows, Inline, Columns, etc) are not sufficient.Background
To apply a background color, pass the
background prop. If this prop is provided, the foreground color compatible children (e.g.Text) will render a foreground color that has sufficient contrast with the background color of Box.Below, you can see that the text color of
surfacePrimary is dark, however, for accent it is light.Padding
To apply padding to the bounds of Box, pass the
padding prop. The system also supports margin a particular direction or side, as seen below.Margin
To apply margin to the bounds of Box, pass the
margin prop. The system also supports margin a particular direction or side, as seen below.Border radius
To apply a border radius, supply the
borderRadius prop with a numerical pixel value. The system also supports border radius on directional or specific corners as seen below.