Box

const Box: ForwardRefExoticComponent<BoxProps & RefAttributes<GlyphNode>>;

Generic layout container — the building block of every Glyph UI.

Box maps directly to a Yoga flexbox node, so all CSS-like flex properties (flexDirection, gap, padding, alignItems, …) work out of the box.

Examples

<Box style={{ flexDirection: "row", gap: 1, padding: 1 }}>
  <Text>Hello</Text>
  <Text>World</Text>
</Box>

// Centered card with a border
<Box
  style={{
    border: "round",
    borderColor: "cyan",
    padding: 1,
    alignItems: "center",
    justifyContent: "center",
    width: 40,
    height: 10,
  }}
>
  <Text style={{ bold: true }}>Welcome!</Text>
</Box>

---

Properties

Property	Type	Description
children?	ReactNode	Child elements to render inside the box.
focusable?	boolean	When true, the box participates in the focus (Tab) order.
onClick?	MouseEventHandler	Called on mouse click (mouseup).
onMouseDown?	MouseEventHandler	Called on mouse button press.
onMouseEnter?	MouseEventHandler	Called when the mouse cursor enters the box.
onMouseLeave?	MouseEventHandler	Called when the mouse cursor leaves the box.
onMouseMove?	MouseEventHandler	Called on mouse movement over the box.
onMouseUp?	MouseEventHandler	Called on mouse button release.
onWheel?	MouseEventHandler	Called on mouse wheel scroll.
style?	Style	Flexbox style object controlling layout, colors, borders, and more.