Box
A flex container. It stacks its children in a column (direction "row" puts them in a row). Use it to group children with gap, padding, border, radius or background.
Examples
Loading examples…
Props
| Prop | Type | Description |
|---|---|---|
align | "start" | "center" | "end" | "baseline" | "stretch" | |
justify | "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly" | "stretch" | |
wrap | "nowrap" | "wrap" | "wrap-reverse" | |
gap | number | string | 4px steps when a number |
rowGap | number | string | |
columnGap | number | string | |
padding | number | string | 4px steps when a number |
background | string | One of surface|surface-secondary|surface-tertiary|surface-elevated|surface-elevated-secondary|surface-inverted|surface-soft|info|warning|caution|success|danger|discovery|info-solid|warning-solid|caution-solid|success-solid|danger-solid|discovery-solid or a CSS color. Leave it unset. Only one summary panel in a Card can use "surface-secondary" |
border | boolean | |
borderColor | "default" | "subtle" | "strong" | "info" | "warning" | "caution" | "success" | "danger" | "discovery" | |
radius | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | number | string | object | |
width | number | string | |
height | number | string | |
minWidth | number | string | |
maxWidth | number | string | |
minHeight | number | string | |
maxHeight | number | string | |
flex | number | |
weight | number | flex-grow in a Row or Column |
aspectRatio | string | |
scrollable | boolean | |
clip | boolean | |
shadow | boolean | |
inline | boolean | |
role | string | ARIA role |
flush | boolean | No padding |
minSize | number | string | Minimum width and height |
maxSize | number | string | Maximum width and height |
disableAutoSpacing | boolean | No default gap between children |
direction | "col" | "row" | Default "col" |
Slots
children· multiple
Events
onVisible· Sent once, the first time the container scrolls into view. Use it to load more content lazily.