Wrap

Wrap is a Box that lays its children out in a row and lets them spill to the next line when the container runs out of width. Reach for it when the item width is intrinsic and the column count isn't fixed.

What it is

A <Box display="flex" flexWrap="wrap">. The gap style prop spaces items both horizontally and vertically — no margin tricks required. Stack is the better choice when the column count is fixed; Wrap is the better choice when items size themselves and you want the line break to happen naturally.

Install

Wrap is exported from usemotif. No separate install.

import { Wrap } from 'usemotif';

API

function Wrap(props: WrapProps): JSX.Element

Examples

Tag list:

<Wrap gap="$2">
{tags.map((tag) => (
  <Tag key={tag}>{tag}</Tag>
))}
</Wrap>

Chip row with an aligned action at the end:

<Wrap gap="$2" alignItems="center">
{filters.map((f) => (
  <Chip key={f.id}>{f.label}</Chip>
))}
<Button intent="neutral" size="sm">Clear all</Button>
</Wrap>