Skip to main content
HStack(children: Component): Component;
HStack(children: Component[]): Component;
HStack(props: { spacing?: number, alignment?: VerticalAlignment }, children: Component[]): Component;

​
Parameters

​
children
Component | Component[]
A single child component or an array of child components to arrange horizontally.
​
props
{ spacing?: number, alignment?: VerticalAlignment }
Configuration options for the horizontal stack.

​
Support

​
Usage

​
Basic horizontal stack

HStack([
    Text("First"),
    Text("Second"),
    Text("Third")
])

​
Stack with spacing

HStack({ spacing: 52 }, [
    Button("Previous", () => {}),
    Button("Next", () => {})
])

​
Stack with vertical alignment

HStack({ alignment: "center" }, [
    Image("icon.png").frame({ width: 24, height: 24 }),
    Text("Icon with text")
])

​
Stack with spacing and alignment

HStack({ spacing: 12, alignment: "top" }, [
    VStack([
        Text("Title").font("headline"),
        Text("Subtitle").font("subheadline")
    ]),
    Spacer(),
    Button("Action", () => {})
]).padding(20)