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.
src/atoms/container
View in Layout

Playground

Every control sets a real prop of ContainerProps. The JSX below updates as you go.
Sign in
Props
Step
pick one
Gutters
pick one
fluid
boolean
start
boolean
JSX · ContainerProps
<Container md />

Variants

3 examples from src/atoms/container/container.md, each rendered live from its own JSX.
xs, 320
md, 448
xl, 576
Steps
<Column>
<Container xs><Card><Typography small>xs, 320</Typography></Card></Container>
<Container md><Card><Typography small>md, 448</Typography></Card></Container>
<Container xl><Card><Typography small>xl, 576</Typography></Card></Container>
</Column>
Settings
Pinned to the start
<Container sm start>
<Card>
<Typography small>Settings</Typography>
</Card>
</Container>
The default measure is the parent's own width; pad adds 16px gutters on both sides.
Full width with gutters
<Container pad>
<Card padded>
<Typography small>The default measure is the parent's own width; pad adds 16px gutters on both sides.</Typography>
</Card>
</Container>

Anatomy

Sign in
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 *.
Prop
Type
Default
Description
Props
2 props
children
ReactNode
–
fluid
boolean
false
No cap, the default: the container spans its parent. Explicit fluid wins over every step when several are passed.
Gutters
pick one
5 props
padTight
boolean
false
pad
boolean
false
padLoose
boolean
false
testID
string
–
E2E hook forwarded to the root element.
style
StyleProp<ViewStyle>
–
Layout containers are the exception to the no-sizing rule: for composition inside an app frame only (a flex in a screen shell), never a restyle hook.
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.
xs, 320
md, 448
xl, 576
Web
control 10 · field 10 · card 16 · Instrument Sans
xs, 320
md, 448
xl, 576
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
xs, 320
md, 448
xl, 576
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Container sm>
<Card>
<Typography medium>Sign in</Typography>
</Card>
</Container>
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

Related components