Row

Flex fixed to direction: row. The default horizontal layout primitive — reach for it whenever children should sit side by side.

<Row gap="16" alignItems="center">
  <Text>A</Text>
  <Text>B</Text>
</Row>

<Row>
  ...
</Row>

Examples

wrap="wrap" lets children flow onto additional lines instead of overflowing or shrinking to fit — useful for a toolbar or tag list that shouldn't force a horizontal scrollbar on a narrow screen:

<Row gap="8" wrap="wrap">
  {tags.map((tag) => (
    <Chip key={tag}>{tag}</Chip>
  ))}
</Row>

justifyContent="between" is the common pattern for a header-style row — one group pinned to each end with whatever space is left between them:

<Row justifyContent="between" alignItems="center">
  <Heading as="h2">Section title</Heading>
  <Button size="s">Action</Button>
</Row>

Props