Box - EXPRESSO Docs

box is a general-purpose container. Its children can overlap; the last rendered child is drawn on top.

Properties

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

box has no node-specific properties. horizontalAlignment and verticalAlignment on the style align every child inside the same box. Children stay stacked, and later children render on top. See How layout alignment works.

Example

<box
  style={{
    width: 160,
    height: 96,
    borderRadius: 12,
    backgroundColor: "#e0e7ff"
  }}
>
  <img
    src="https://cdn.example.com/product.jpg"
    style={{ width: "100%", height: "100%" }}
    resizeMode="cover"
    alt="Product"
  />
  <text
    style={{
      padding: 8,
      color: "#ffffff",
      fontWeight: 700,
      backgroundColor: "#111827"
    }}
  >
    New
  </text>
</box>

Use clip: true when overlaid children must stay inside rounded or bounded edges.