Skip to main content
HStack(children: Component): Component;
HStack(children: Component[]): Component;
HStack(props: { spacing?: number; alignment?: VerticalAlignment }, children: Component[]): Component;
​
children
Component | Component[]
required
A single component or array of components to arrange horizontally.
​
props
object
Configuration options for the stack layout.

​
Support

​
Usage

​
Basic stack

HStack([
    Image({ systemName: "star.fill" }),
    Text("Favorites")
])

​
With spacing and alignment

HStack({ spacing: 12, alignment: "top" }, [
    Image({ url: "avatar.jpg" })
        .frame({ width: 48, height: 48 })
        .clipShape(Circle()),
    VStack({ alignment: "leading" }, [
        Text("Jane Doe").font("headline"),
        Text("Online").foregroundStyle(Color("green"))
    ])
])

​
With spacers for alignment

HStack([
    Text("Leading"),
    Spacer(),
    Text("Trailing")
])
    .padding(16)

​
Baseline alignment

HStack({ alignment: "firstTextBaseline" }, [
    Text("Title").font("title"),
    Text("subtitle").font("caption")
])

​
See Also