Container
Atom
The bounds provider. A Canvas component never dictates its own width: Container conforms to its parent (full width, no cap) by default, and a named step of the shared width scale (xxxs 192 through page 1280) caps and centers it, so the reading measure of a form, an article, or a card stack is a step you can name instead of a width invented at the call site.
Playground
Every control sets a real prop of ContainerProps. The JSX below updates as you go.
Web
iOS
Android
JSX · ContainerProps
Variants
3 examples from src/atoms/container/container.md, each rendered live from its own JSX.
Anatomy
1
Track
2
Capped column
3
Gutter
Dimmed parts appear only in some states or variants.
Props
7 props on ContainerProps, grouped as they are declared in source. Required props are marked *.
MeasureProps · width steps xxxs 192 · xxs 256 · xs 320 · sm 384 · md 448 · lg 512 · xl 576 · xxl 672 · xxxl 768 · wide 896 · wider 1024 · widest 1152 · page 1280, plus start to pin to the leading edge.
Accessibility and keyboard
Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
No role of its own in source; it reads as the content it renders.
Platform skins
The playground's props on each platform: same tree, native shapes, type and touch sizes.
Usage
A component fills the parent it is given (a field, a card, a table) or hugs its content (a button, a badge), and the nearest layout container provides the bounds. Container is the layout container whose job is a MEASURE, and by default the parent is the conformance factor. A cap is fluid: inside anything narrower than the step the container simply fills its parent, which is all a phone screen is. start pins a capped box to the leading edge instead of centering it, and padTight / pad / padLoose add horizontal gutters from Row and Column's own padding scale.
The step booleans and start are the kit's measure axis, and the fields, Field, Form, Button, and ButtonGroup carry it too: <Input sm start> says exactly what <Container sm start> around it says, a cap at the step and fluid below it. Reach for Container when the measure belongs to a group (a form, an article, a card stack) rather than to one component.
Tokens
Read from the playground render. Values follow the scheme and the ion hue.
--fd
--fm
--ft
--ion-ring
--ion-soft
--ion-tx
--ln