Row - EXPRESSO Docs

row lays out children horizontally. Use it for inline content, action groups, and cards in a horizontal strip.

Properties

Property	Accepted value	Description
`style`	`StyleProperties`	Layout, appearance, and transform values.
`children`	`ReactNode`	Child nodes rendered horizontally.
`key`	`string \| number`	React key for dynamic children.
`class`	`string`	Registered style name for this node only.

row has no node-specific properties. On a row, horizontalAlignment positions the child group along the row’s width and verticalAlignment aligns each child across its height. spacing adds horizontal gaps. See How layout alignment works.

Example

<row style={{ padding: 12, spacing: 8, horizontalAlignment: "center" }}>
  <img
    src="https://cdn.example.com/avatar.png"
    alt="Profile"
    style={{ width: 40, height: 40, borderRadius: 20 }}
  />
  <column style={{ weight: 1 }}>
    <text style={{ fontWeight: 700 }}>Alex Morgan</text>
    <text style={{ color: "#667085" }}>Member</text>
  </column>
  <button text="View" variant="secondary" />
</row>