Printed on: July 2, 2025
On iOS 26 we’ve a number of new methods to reimagine our UIs with Liquid Glass. Because of this we are able to check out Apple’s built-in purposes and discover fascinating purposes of Liquid Glass that we are able to use to boost our understanding of how Liquid Glass elements will be constructed, and to know what Apple considers to be good apply for Liquid Glass interfaces.
On this put up, we’re going to duplicate a management that’s a part of the brand new maps app.
It’s a vertical stack of two buttons in a single Liquid Glass container. Right here’s what the element appears like in iOS 26:
And right here’s the element that we’ll construct on this put up:
We’re going to be making use of buttons, button kinds, a GlassEffectContainer, and the glassEffectUnion view modifier to realize our impact.
Constructing the element’s buttons
We’ll begin off with a GlassEffectContainer and a VStack that accommodates two buttons:
GlassEffectContainer {
VStack {
Button {
} label: {
Label("Areas", systemImage: "sq..2.layers.3d.prime.crammed")
.daring()
.labelStyle(.iconOnly)
.foregroundStyle(Colour.black.secondary)
}
.buttonStyle(.glass)
Button {
} label: {
Label("Navigation", systemImage: "location")
.daring()
.labelStyle(.iconOnly)
.foregroundStyle(Colour.purple)
}
.buttonStyle(.glass)
}
}This code will merely create two buttons on prime of one another utilizing a glass button model. The ensuing UI appears like this:
That’s not nice but it surely’s a begin. We have to apply a special buttonStyle and tint our glass to have a white background. The code beneath exhibits how to try this. For brevity, I’ll solely present a single button; the buttonStyle must be utilized to each of our buttons although:
GlassEffectContainer {
VStack {
// ...
Button {
} label: {
Label("Navigation", systemImage: "location")
.daring()
.labelStyle(.iconOnly)
.foregroundStyle(Colour.purple)
}
.buttonStyle(.glassProminent)
}.tint(.white.opacity(0.8))
}With this code, each buttons have a outstanding model which provides them a background coloration as a substitute of being absolutely translucent like they’re with the conventional glass impact:
Now that we’ve our buttons arrange, what we have to do is group them collectively right into a single glass form. To do that, we use the glassEffectUnion view modifier on each parts that we wish to group.
Let’s go forward and try this subsequent.
Grouping parts utilizing a glassEffectUnion
A glassEffectUnion can be utilized to have a number of buttons contribute to a single Liquid Glass form. In our case, we would like these two buttons to be handled as a single Liquid Glass form in order that they find yourself trying much like the Apple Maps elements we’re attempting to duplicate.
First, we have to add a namespace to our container view:
@Namespace var unionNamespaceWe’ll use this namespace as a solution to join our parts.
Subsequent, we have to replace our buttons:
GlassEffectContainer {
VStack {
Button {
} label: {
Label("Areas", systemImage: "sq..2.layers.3d.prime.crammed")
.daring()
.labelStyle(.iconOnly)
.foregroundStyle(Colour.black.secondary)
}
.buttonStyle(.glassProminent)
.glassEffectUnion(id: "mapOptions", namespace: unionNamespace)
Button {
} label: {
Label("Navigation", systemImage: "location")
.daring()
.labelStyle(.iconOnly)
.foregroundStyle(Colour.purple)
}
.buttonStyle(.glassProminent)
.glassEffectUnion(id: "mapOptions", namespace: unionNamespace)
}.tint(Colour.white.opacity(0.8))
}By making use of glassEffectUnion(id: "mapOptions", namespace: unionNamespace) to each views they change into linked. There are a couple of circumstances to make the grouping work although:
- The weather should have the identical
idfor them to be grouped - The glass impact that’s used should be the identical for all parts within the union or they received’t be grouped
All elements within the group should be tinted the identical manner or they received’t be grouped
Now that our parts are grouped, they’re nearly precisely the place we would like them to be:
The buttons are a bit near the highest and backside edges so we should always apply some padding to our Label elements. I just like the spacing within the center, so what I’ll do is pad the highest of the primary Label and the underside of the second:
GlassEffectContainer {
VStack {
Button {
} label: {
Label("Areas", systemImage: "sq..2.layers.3d.prime.crammed")
.daring()
.labelStyle(.iconOnly)
.padding(.prime, 8)
.foregroundStyle(Colour.black.secondary)
}
.buttonStyle(.glassProminent)
.glassEffectUnion(id: "mapOptions", namespace: unionNamespace)
Button {
} label: {
Label("Navigation", systemImage: "location")
.daring()
.labelStyle(.iconOnly)
.padding(.backside, 8)
.foregroundStyle(Colour.purple)
}
.buttonStyle(.glassProminent)
.glassEffectUnion(id: "mapOptions", namespace: unionNamespace)
}.tint(Colour.white.opacity(0.8))
}This completes our impact:
In Abstract
On iOS 26, we’ve countless new prospects to construct fascinating UI elements with Liquid Glass. On this put up, we tried copying a UI factor from Apple’s Maps utility to see how we are able to construct a single Liquid Glass factor that teams two vertically stacked buttons collectively.
We used a glassEffectUnion to hyperlink collectively two UI Parts and make them seem as a single Liquid Glass form.
You discovered that this view modifier will group any Liquid Glass elements that share the identical glass model right into a single form. This implies these elements they’ll feel and look like a single unit.
