Skip to main content
.layoutPriority(priority: number): Component;

​
Parameters

​
priority
number
The layout priority value. Higher numbers indicate higher priority. Views with higher priority are allocated space before lower priority views when space is constrained.

​
Support

​
Usage

​
Prioritize important content

HStack([
    Text("Important content")
        .layoutPriority(1), // High priority - gets space first
    Text("Less important")
        .layoutPriority(0), // Low priority - may truncate
    Text("Least important")
        .layoutPriority(-1) // Negative priority - truncates first
])

​
Form field priorities

const [email, setEmail] = useState("")

HStack([
    Text("Email:")
        .layoutPriority(1), // Label gets priority
    TextField({ placeholder: "[email protected]", text: email, setText: setEmail })
        .layoutPriority(2), // Input field highest priority
    Button("Verify", () => {})
        .layoutPriority(0) // Button can be compressed
])

HStack([
    Button("Back", () => {})
        .layoutPriority(1), // Back button always visible
    Text(pageTitle)
        .layoutPriority(2), // Title gets highest priority
    Button("More", () => {})
        .layoutPriority(0) // Can be hidden in tight space
])

​
Card content hierarchy

VStack([
    Text(article.title)
        .layoutPriority(3), // Title is most important
    Text(article.summary)
        .layoutPriority(2), // Summary second priority
    HStack([
        Text(article.author)
            .layoutPriority(1),
        Text(article.date)
            .layoutPriority(0) // Date can be truncated
    ])
])

​
Toolbar priorities

HStack([
    Button("Save", () => {})
        .layoutPriority(2), // Primary actions get priority
    Button("Export", () => {})
        .layoutPriority(1),
    Spacer(),
    Button("Settings", () => {})
        .layoutPriority(0), // Secondary actions lower priority
    Button("Help", () => {})
        .layoutPriority(-1) // May be hidden first
])

​
Dynamic priority based on state

HStack([
    Text("Status: ")
        .layoutPriority(1),
    Text(statusMessage)
        .layoutPriority(isError ? 3 : 1), // Error messages get high priority
    Button("Refresh", () => {})
        .layoutPriority(isLoading ? 0 : 2) // Lower priority when loading
])

​
Table cell content

HStack([
    Text(item.name)
        .layoutPriority(2), // Name is most important
    Spacer(),
    Text(item.category)
        .layoutPriority(1), // Category secondary
    Text(`$${item.price}`)
        .layoutPriority(3) // Price should always be visible
])

​
Responsive layout

HStack([
    Image("logo")
        .layoutPriority(0), // Logo can be hidden
    VStack([
        Text("Main Content")
            .layoutPriority(3), // Content always visible
        Text("Subtitle")
            .layoutPriority(1) // Subtitle lower priority
    ]),
    Button("Action", () => {})
        .layoutPriority(2) // Action button important
])