Stack

Discriminator: stack
Fluent UI Blazor Component: FluentStack

Description

The Stack component is a layout container that arranges its child components either horizontally or vertically. It provides control over alignment, spacing, and wrapping behavior. Stack is the primary building block for creating complex layouts by nesting multiple components together.

Properties

Property	Type	Required	Default	Description
`component`	`string`	✅ Yes	`"stack"`	Type discriminator
`style`	`string`	No	`null`	Inline CSS style
`id`	`string`	No	`null`	Component identifier for data binding
`children`	`Component[]`	No	`[]`	Array of child components to render inside the stack
`orientation`	`Orientation`	No	`Vertical`	Layout direction: `Horizontal` or `Vertical`
`verticalAlignment`	`VerticalAlignment`	No	`Top`	Vertical alignment of children: `Top`, `Center`, `Bottom`, `Stretch`, `SpaceBetween`
`horizontalAlignment`	`HorizontalAlignment`	No	`Left`	Horizontal alignment of children: `Left`, `Start`, `Center`, `Right`, `End`, `Stretch`, `SpaceBetween`
`horizontalGap`	`int?`	No	`10`	Horizontal gap between children in pixels
`verticalGap`	`int?`	No	`10`	Vertical gap between children in pixels
`wrap`	`bool`	No	`false`	Whether children should wrap to the next line when they exceed the available space
`reverse`	`bool?`	No	`null`	Whether to reverse the order of children

Data Binding

The Stack component aggregates data from all its children. When a button's data binding references component IDs inside a stack, the stack automatically collects data from each child and merges it.

Similarly, validation is aggregated — validating a stack returns all validation errors from all children.

JSON Example

Vertical Stack

Rendering...

Horizontal Stack with Wrapping

Rendering...

Conigma Connect