The widget configuration
Optionalcss?: TokensThe value each token takes on the box and inside it, keyed by token name; a
token left out or given undefined keeps whatever the cascade already gives it, and the box is left unpadded,
square, flat and painted as what encloses it.
Optionalchildren?: ComponentChildrenWhat the box holds, set inside its padding.
The styled box
Creates a styled box.
Assigns the tokens given to a box enclosing what it holds, as a styled area does, and shapes the box itself from them:
padding,borderRadiusandboxShadowpad, round and lift the box alone, whilebackgroundColorandcolorpaint it and carry on to everything inside it, as every other token assigned does. Each is set from a step of the ladder it belongs to, so a box follows whatever an app retuned the design system to:The box stands as wide as whatever holds it and as tall as what it holds, unless a stack or a strip holding it stretches it further, and stretches what it holds to fill it both ways: a stack or a strip inside a stretched box takes its full height, and places its items in it. As an item of a stack or a strip, the box shrinks no further than what it holds allows, exactly as that would on its own. The box holds a single element, a layout or a block: several elements lie over one another, and text is wrapped in an element of its own rather than handed to the box loose.
The box carries no semantics: a role for assistive technology goes on an element inside it or around it.