Skip to main content
.safeAreaInset(props: {
    edge: "top" | "bottom";
    alignment?: "leading" | "center" | "trailing";
    spacing?: number;
}, content: Component): Component
​
props
object
required
​
content
Component
required
The component to place in the safe area inset.

​
Support

​
Usage

​
Floating bottom bar

ScrollView([
    ForEach(items, (item) =>
        Text(item.name).padding(12)
    )
]).safeAreaInset(
    { edge: "bottom" },
    HStack({ spacing: 12 }, [
        Button("Cancel", () => {}),
        Button("Save", () => {}),
    ])
        .padding(16)
        .background(Material("bar"))
)

​
Top banner

ScrollView([
    ForEach(items, (item) =>
        Text(item.name).padding(12)
    )
]).safeAreaInset(
    { edge: "top", spacing: 0 },
    Text("New items available")
        .frame({ maxWidth: Infinity })
        .padding(8)
        .background(Color("blue"))
        .foregroundStyle(Color("white"))
)

​
Notes

  • The inset content stays fixed while the main content scrolls underneath.
  • The main content’s safe area is adjusted to account for the inset, preventing overlap.
  • Use for persistent toolbars, banners, or action bars that float above scrollable content.