Skip to contentSkip to navigation
DocsDocs

Row

Lays out content side by side with even gaps, wrapping when it doesn't fit.

BetaSince 1.0.0
On this page

Overview

Show code, FormActions.tsx

Variants

Justify

Where the row has room to spare, its children sit at the start, in the center, at the end, or spread to the edges, such as a heading and its action.

Gaps

The gap between the children is a step of the spacing scale.

Step 2

A label and its badge.

Step 3

A toolbar's controls.

Step 4

Actions, such as a form's.

Behaviour

Adapting to width

A row that wraps runs onto more lines; it never turns into a column by itself; change the layout at a window class for that.

Show code, SectionHeading.tsx

Rules

A row that may get narrow wraps, so its children keep their shape.

Use it when

  • A few actions that belong together, such as Cancel and Save
  • A heading and its actions on one line
  • Small items side by side, such as a label and a badge
DoA row that wraps, so an action that doesn't fit moves down.
Show code, WrappingActions.tsx
Don’tNo wrap in a narrow pane: the labels break inside their buttons.
Show code, SqueezedActions.tsx

Alignment

Center controls of different heights on their line, such as a heading and a small button.

Related

  • Content top to bottom.

  • Content in columns of equal or set widths, such as cards.

  • Buttons joined into one connected control, such as a main action beside a menu of alternatives.

  • Controls for one subject that the arrow keys move between, such as an editor's formatting.

  • One block with an inset or a size container, and no layout.