Row

Import

import { Row } from '@envsemble/envui';

Usage

Row lays out its children side by side, in the reading direction.

gap is the space between them, a step of the spacing scale from 0 to 9, none by default: 2 between a label and its badge, 3 between a toolbar's controls, 4 between actions.
wrap lets the row run onto more lines when its children don't fit.

FormActions.tsx

import { Button, Column, Row, TextField } from '@envsemble/envui';

export default function FormActions() {
  return (
    // render lays the form out as the column, without a wrapper.
    <Column gap={5} render={<form onSubmit={(event) => event.preventDefault()} />}>
      <TextField label="Project name" defaultValue="Northwind launch" />
      <Row wrap align="center" gap={4} render={<footer />} justify="end">
        <Button variant="secondary">Cancel</Button>
        <Button type="submit">Save changes</Button>
      </Row>
    </Column>
  );
}

Align and justify

align lines the children up across the line, and justify places them along it when there is room to spare.

align: stretch, the default, makes each as tall as the row, except controls such as buttons, which keep their own size; start, center and end keep each at its own size, and center suits controls of different heights.
justify: start, the default, center, end, or between, out to the edges, such as a heading and its action.

<Row wrap align="center" justify="between" gap={3}>
  <Row align="center" gap={2}>
    <Text render={<h3 />} variant="title">
      Members
    </Text>
    <Badge>12</Badge>
  </Row>
  <Button variant="secondary" size="sm" startIcon={<IconAdd />}>
    Invite people
  </Button>
</Row>

Element, inset and name

render gives the row its meaning, such as render={<footer />} or render={<ul />}, or lays out another component without a wrapper, such as a Surface; ref reaches the rendered element.
padding sets an inset on every side, a step of the spacing scale, none by default.
name names the node for dev mode, as data-env-name.

A row that becomes a column

A row never turns into a column by itself. container makes it a size container of that name, so CSS can change the layout at a window class, such as container="filters" with @container filters (width >= 37.5rem).

Accessibility

You provide

role="group" and an aria-label on a row of actions that needs a shared name.

envUI provides

A div with no role of its own, or the element in render, such as render={<footer />}.
A visual order that follows the document order and the reading direction.

Props

Lays its direct children out side by side, `gap` apart, with `wrap` to run onto more lines, such as a form's actions. A flex row that sizes to its content and never paints.

Prop	Type	Description
`wrap`Default `false`	`boolean`	Lets the row run onto more lines when its children don't fit, as a row of actions does.
`gap`	`0123456789`	The space between the direct children, a step of the spacing scale. None by default.
`align`Default `'stretch'`	`'start''center''end''stretch'`	How the children line up across the line: stretch, the default, makes each as wide as a column or as tall as a row, except controls such as buttons, which keep their own size; start, center and end keep every child at its own size.
`justify`Default `'start'`	`'start''center''end''between'`	Where the children sit along the line when there is room to spare: at the start, in the center, at the end, such as a form's actions, or between, spread out to the edges.
`render`	`ReactElement`	The element to render, for its meaning, such as render={<section />} or render={<ul />}, or another component to lay out without a wrapper, such as a Surface: the primitive's attributes merge into its props. It must forward native props and refs. A div by default.
`ref`	`Ref<RenderedElement>`	The rendered element, a div by default. Its type is the element type parameter, which a ref passed in sets: a ref to the element that render makes, such as useRef<HTMLElement>(null) with render={<section />}, type-checks.
`name`	`string`	A name for this node, such as "filters" or "summary", which dev mode and the docs show; it renders as `data-env-name`. A component's part class names its node instead.
`container`	`string`	Makes the element a size container of this name, for container queries on its inline size, such as container="filters" for `@container filters (width >= 37.5rem)`. A container is as wide as its context gives it, never as its content. container="env-window" makes the element a window of its own on purpose, such as a preview frame, whose content lays out at its window class; other `env-*` names are envUI's own.
`padding`	`0123456789`	The inset on every side, a step of the spacing scale. None by default.

Also accepts the native props of <div>, such as ref, className and aria-* attributes.

Changelog

1.0.0: Row, with Column, Grid and Box, replaces Stack: a Stack with direction="row" is a Row. A Row has no gap of its own, where Stack's default was gap={4}.