FluxStack

Layout primitive for arranging children with consistent spacing. Pick direction=horizontal for toolbars / button rows and vertical for forms / lists. gap picks a step on the 4-px spacing grid. Children pass through — Stack has no slots.

Extends: Column (a2ui/basic@0.10)

Category: primitive

Props

Name

Type

Required

Default

accessibility

object

no

``

align

'start' | 'center' | 'end' | 'stretch'

yes

'stretch'

component

'FluxStack'

yes

``

direction

'vertical' | 'horizontal'

yes

'vertical'

gap

'1' | '2' | '3' | '4' | '6' | '8'

yes

'3'

id

string

yes

``

justify

'start' | 'center' | 'end' | 'between' | 'around'

yes

'start'

wrap

boolean

no

``

Examples

Horizontal button row with 16px gap.

UI.stack(direction="horizontal", gap="4", align="center", children=[save_btn, cancel_btn])

Vertically centered title stack.

UI.stack(direction="vertical", gap="2", align="center", children=[title, subtitle])

Anti-patterns

Avoid: Stack is for ≥2 children. A single child needs no wrapper — pass the component directly.

UI.stack(children=[single_child])

Avoid: More than four nested stacks is a layout smell. Flatten or extract a Card / Column.

UI.stack(children=[UI.stack(children=[UI.stack(children=[UI.stack(children=[...])])])])

Tokens used

  • $space.1

  • $space.2

  • $space.3

  • $space.4

  • $space.6

  • $space.8

Basic-catalog fallback

  • Component: Column

  • Prop map: direction → direction, gap → gap

  • Notes: Basic renderers only speak Column/Row — horizontal stacks degrade to a vertically stacked Column; gap/align/justify are dropped.