Skip to content
YAGE Logo YAGE

LayoutProps

Defined in: ui/src/types.ts:113

Common layout props every element can accept (applied to its Yoga node).

Extended by

Section titled “Extended by”

Properties

Section titled “Properties”

alignSelf?

Section titled “alignSelf?”

optional alignSelf?: "stretch" | "auto" | "flex-start" | "center" | "flex-end" | "baseline"

Defined in: ui/src/types.ts:137

bottom?

Section titled “bottom?”

optional bottom?: PositionValue

Defined in: ui/src/types.ts:163

Offset from the containing block’s bottom edge — px or "<n>%" (only applies to position: "absolute").

flex?

Section titled “flex?”

optional flex?: number

Defined in: ui/src/types.ts:136

Shorthand for the common CSS flex: <number> case — expands to flexGrow: <number>, flexShrink: 1, flexBasis: 0. Use it for a child that should fill the remaining main-axis space (e.g. the text column between a fixed icon and a fixed button): sizing from a 0 basis means it won’t claim its content width and push its siblings, and its text wraps cleanly. Prefer this over flexGrow: 1 alone, which keeps flexBasis: auto (content width) and overflows. Explicit flexGrow/flexShrink/flexBasis override the parts this expands to.

flexBasis?

Section titled “flexBasis?”

optional flexBasis?: LayoutValue

Defined in: ui/src/types.ts:125

flexGrow?

Section titled “flexGrow?”

optional flexGrow?: number

Defined in: ui/src/types.ts:123

flexShrink?

Section titled “flexShrink?”

optional flexShrink?: number

Defined in: ui/src/types.ts:124

height?

Section titled “height?”

optional height?: LayoutValue

Defined in: ui/src/types.ts:115

left?

Section titled “left?”

optional left?: PositionValue

Defined in: ui/src/types.ts:157

Offset from the containing block’s left edge — px or "<n>%" (only applies to position: "absolute").

margin?

Section titled “margin?”

optional margin?: number | { bottom?: number; left?: number; right?: number; top?: number; }

Defined in: ui/src/types.ts:120

maxHeight?

Section titled “maxHeight?”

optional maxHeight?: LayoutValue

Defined in: ui/src/types.ts:119

maxWidth?

Section titled “maxWidth?”

optional maxWidth?: LayoutValue

Defined in: ui/src/types.ts:117

minHeight?

Section titled “minHeight?”

optional minHeight?: LayoutValue

Defined in: ui/src/types.ts:118

minWidth?

Section titled “minWidth?”

optional minWidth?: LayoutValue

Defined in: ui/src/types.ts:116

position?

Section titled “position?”

optional position?: "relative" | "absolute"

Defined in: ui/src/types.ts:155

Positioning mode for this element relative to its parent. Defaults to "relative" — the element flows in the parent’s flex layout. Set to "absolute" to lift the element out of the flow and pin it via left / top / right / bottom against the parent’s content box.

A position: "relative" ancestor acts as the containing block for any absolute-positioned descendants — useful for HUD overlays, modal backdrops, and badge markers. See <ZStack> in @yagejs/ui-react for an opinionated overlay primitive.

Section titled “right?”

optional right?: PositionValue

Defined in: ui/src/types.ts:161

Offset from the containing block’s right edge — px or "<n>%" (only applies to position: "absolute").

top?

Section titled “top?”

optional top?: PositionValue

Defined in: ui/src/types.ts:159

Offset from the containing block’s top edge — px or "<n>%" (only applies to position: "absolute").

visible?

Section titled “visible?”

optional visible?: boolean

Defined in: ui/src/types.ts:164

width?

Section titled “width?”

optional width?: LayoutValue

Defined in: ui/src/types.ts:114