Mastering Liquid Glass in SwiftUI – Buttons, Containers & Transitions

Hi, my name is Stuart Lynch. In this video, we'll dive deeply into Swift UI's new liquid glass effects introduced in OS26. From button styles to geometry transitions and grouped glass containers.

I'll walk you through what you need to know to start creating stunning fluid UIs in your apps.

This is the first of several videos on the topic, so stay tuned. There's a lot to cover, so let me first show you what we will be covering. I'm going to start by showing you all the different button styles that we have, comparing the new liquid glass to older versions so that you can get an appreciation for the new look. I'll next move on to show you how you can apply different

glass effects to different types of views and use a new glass effect container spacing to blend them together. That'll be followed by more power for the glass effect container where you can create

together. That'll be followed by more power for the glass effect container where you can create unions of adjacent views and containers using namespaces. And then finally, I'll show you how you can apply the new match geometry transition for glass effects on different objects.

There is a starter project for this video and you can find it in the link in the description.

There are two branches. The starter project is the first branch and that is the one that you want to either clone or extract the zip file for if you want to follow along with me. The

completed branch contains the completed source code for the project. With Liquid Glass this year, we got two new button styles. So, in order to get a full appreciation of these new styles, I think it's wise to look at them in comparison with the five existing styles to see how things have changed and how they all operate. In this first tab, I've set up a form with two sections.

The first section is going to contain the existing pre-lquid glass buttons, while the second will contain the new styles introduced this year. I want to compare what identical buttons will look like. So, what I'm going to do is to create the same button for each style. And this is just a

like. So, what I'm going to do is to create the same button for each style. And this is just a button where the label is the string label. And the action doesn't matter, so I'll just leave it empty. So I can just copy and paste the same control for all sections and I've included them

it empty. So I can just copy and paste the same control for all sections and I've included them in a labeled content container so that you'll see what the style is being applied in the preview.

No style at all gives you the default tint color on the label to designated as a button that can be tapped. The problem with this is that on a row in a list when you tap on the button the entire

be tapped. The problem with this is that on a row in a list when you tap on the button the entire row highlights. That's not great. So the solution is the second case where we can apply a button

row highlights. That's not great. So the solution is the second case where we can apply a button style of borderless. The look is identical but the row no longer highlights just the label itself.

We can remove the tint color entirely if we want by applying another button style of plain.

Now the label tint color is removed and it inherits the style as specified by in this case the labeled content container for text. And when you tap it, it dims to denote touch.

If you want more prominence in your buttons, you can add a bordered button style. This keeps

the label tint color but encloses the button in a capsule with a light gray background by default.

Tapping the button dims both the label and the capsule at the same time. And for

even more prominence, you can apply a bordered prominent button style. And this label itself becomes the same color as the system background while the capsule around it receives the system tint or accent color. So that shouldn't be new to you. Now let's get on with the new stuff. If we apply a button style of glass, the button takes on an entirely new look.

stuff. If we apply a button style of glass, the button takes on an entirely new look.

The capsule now becomes liquid glass, and you'll see more of this shortly. And there is a shadow around the capsule. The label is the system's primary color. Tapping on the button not only dims the label, but the button expands itself. And you can see the difference if I compare it

to the bordered button when I tap it. And the final one is the glass prominent style. This

time the capsule gets the tint color with a glass effect. and the label is the system background.

Now, when you tap on it, you really get the glass effect as it expands. To get a better look at this, I want to see what the buttons look like if the background was different from the system background that we have right now. What would they look like on the gray background that the form has? So, to demonstrate and compare this, I'm just going to create a new

state property that I'm going to call remove background, and I'll initialize it as false.

Then above the form, I'm going to create a toggle where the title will be simply remove background and it's going to be bound to our state variable. Let's also add some padding. And you can see that the toggle takes on a new appearance, too. And I'll cover this and other controls in next videos

in this series. Now what I can do is group my two sections together so that I can apply a list row background modifier to both of them. And then to the group I can apply a list row background and use a turnary operator based on the remove background boolean. If it's

true we'll specify the color clear. Otherwise we'll use the color of the system background.

You get a better appreciation of the styles now and even more if we switch over to dark mode. Here is where liquid glass on buttons really stands out. Look at the difference between the old and the new.

If you're enjoying this video, please give it a thumbs up and leave me a comment. And

make sure you subscribe to my channel and enable notifications. You can also subscribe to my weekly newsletter. I'll leave a link in the description. The newsletter will provide you with more information about my latest videos along with what's coming up, plus some extra bonus material.

Now, if you enjoy my content and want to support my work, you can buy me a coffee. If you really enjoy it, you can become a monthly subscriber and receive early access to all of my videos before they're released on YouTube.

Well, you can apply liquid glass effect to more than just buttons. So,

what I want to do is to take a look at what's possible and also introduce an alternative to the button that you may be interested in. In this next view, I have a background image on this vstack that is in a scroll view. And the only reason I have it here is because I want to be able to demonstrate how the liquid glass appears through on the the images. I'll be creating

them inside this vstack here that has been given the entire frame. So, the background of the image covers the entire view too. So, let me create a text view simply with the string hello world.

I'm going to set the font to a large title. And now I'm going to apply a glass effect modifier.

And this encloses the view in a capsule by default with a glass effect background. So,

let me add some padding around the text. And you can see the image behind. And especially

as I scroll around here, the image behind displays through onto that glass effect. I do have another option. I can apply a clear case for the glass effect. And you can really notice the glass. Now,

option. I can apply a clear case for the glass effect. And you can really notice the glass. Now,

the default case is regular. So, I could have just left it out as we did in the first case. But,

you know, I don't like the capsule. That's the default. Instead, I want to make this another shape like a rectangle. And we can do this by first specifying regular or clear, but we'll go with regular and then in and then using the shortcut for direct

for the rectangle. I could even change the corner radius to something else.

This works just as well for the clear option. So, let me leave it like that.

Well, the glass effect works just as well on images. So,

let me create an image. And I'm going to use a SF symbol Apple logo.

I'm going to set the font size to 36. And I'm going to adjust the frame to be 80 by 80.

Now, I'm going to be using this image quite a few times here. So, I want to copy it to my clipboard. I'm just going to have to change the system name if that's the case. So,

clipboard. I'm just going to have to change the system name if that's the case. So,

let's apply the regular glass effect here. And I'm going to change it to clear. That's cool.

Let me add the same image below, but I'm going to stick to regular so I can leave it out or put it in for clarity.

Now this is just a flat image. And the advantage of being specific of saying that it's irregular is that I can make this control interactive by also chaining an interactive modifier to this. Now it adds like a button. If I add an ontap gesture,

I can add some action to this as I tap and you'll see that later. So, how is this different from the glass button style? Let's see. I'm going to create a button using the same image as the label.

And I'm going to apply the button style of glass as you saw in the first view. Now,

you can see that we have that image though inside a capsule. This doesn't look great.

If you really want to use a button though and have the same effect as the previous example, you could create that button again, but this time I'm going to apply a button style of plane to remove the tint. And then I'm going

to apply the glass effect which will default to regular. The problem with this though is that unlike our image example, the interactive takes the entire image and expands it when it's tapped.

For the button, only the Apple logo label gets some indication that something has been tapped.

So keep that in mind. So what happens if we tighten up the spacing on this vstack? Let me

add a spacing of minus 10. This tightens up that placement and the views overlap. Well,

we have another option and that is a glass effects container that gives us quite a few different options as you'll see. So, first let me create a state property for spacing and it's going to be a double. So, I'm going to initialize it as 0.0.

Now I'm going to enclose that vstack and its background in a new container. And that new container is called a glass effect container. And it too like a vstack or an ht stack has a spacing option. So I'm going to use that and I'm going to use our new spacing variable for

spacing option. So I'm going to use that and I'm going to use our new spacing variable for that. So nothing changed. So the default of the glass effect container must be a spacing of zero.

that. So nothing changed. So the default of the glass effect container must be a spacing of zero.

So let me add a slider to our view above the new container. And I'm going to bind the value of the spacing variable to that slider. And what I'm going to do is I'm going to limit the range to be from zero through 80.

Now, as I move the slider, adjacent views of the same type of glass effect stay put, but the backgrounds start to merge together. The two adjacent clears merge together, and the adjacent regular ones move together. So, this could be a nice effect if that's what you're looking for.

In this next view, I want to look at an alternative to grouping of controls. This time,

my vstack is a different background, but everything else is the same.

Inside the vstack, I want to create an H stack. And within here, I want to create four images, each with a glass effect. So,

I'm going to use SF symbols. And the first one is going to be a cloud.bolt.rain.fill.

And I'm going to use the same font and frame as I have in the previous views.

And I can apply a glass effect.

So let me copy and paste this four more times.

But I'm going to change the image of the second and fourth to be a sun.rain.fill.

So let me enclose this entire hstack in a glass effect container, but I'll leave the spacing at the default zero. Next, I want to create a name space property.

And what this namespace property is going to allow me to do is to specify certain of those images to that namespace and be able to group them. So for each view within the same container, I'm going to apply a glass effect union modifier with an ID for that nameace. So I'm just going to use an integer of one for that ID,

but it can be any hashable and sendable value. and the namespace will be our namespace.

Now if I apply that to all four because they are in the same container and all have the same name space and ID, they all join together in a single capsule. If I change the ID of the third one to a two, nothing changes because the fourth one is a one and the union is spreading from the second

all the way to the fourth. However, if I apply an ID of two to the last one, now the third and fourth have the same ID and they are grouped together independently as are the first two.

Now I could have grouped those last two images and applied the union to just the group to achieve the same goal.

Let me create a second name space and I'm going to create another row in the vstack.

Now, instead of images, I want to use buttons, but I'm going to use the images as the labels. So,

let me copy that second group and paste it below the H stack. And I'll change the group to H stack.

I'm also going to change the ID to one and use my second name space. Now,

this is pretty much the same as what the other two cases were. But I don't want to use interactive on the images because if I did, the entire group would be expanded when I tap on either one of them. So instead, I'm going to use these images as labels for buttons.

And I can apply the glass effect to the button.

I can then apply a button style of plane to the H stack to remove the tint of both buttons. And now when I tap the image responds as a button to show the tab and

buttons. And now when I tap the image responds as a button to show the tab and if I scroll the views you and you can see the glass effect picks up the background.

There's one more thing I want to cover here and that is a new transition that uses the glass effect and that's a glass effect transition. In this final view, let's start with an H stack. And

in that H stack, I want to create an image using a system image. This time using a photo. And as

before, we'll set the font to a system size of 36 and apply a frame with a width and height of 80.

Now I want to apply a regular glass effect here. But I also want to tint the glass as well. So for this I'll need to specify that type as being regular. And then I can apply a tint by

well. So for this I'll need to specify that type as being regular. And then I can apply a tint by chaining a tint modifier with a teal color. And I can set the opacity to 0.4. And I'm going to make

that image interactive as you'll soon see. So, we're going to apply an interactive modifier.

So, let me just copy and create two more in the H stack. I'm going to change the first image to building.2 and fish for the second. Now, both of these I want to have a glass effect. So, I'm

building.2 and fish for the second. Now, both of these I want to have a glass effect. So, I'm

going to group them. And now I can apply the glass effect to the group. So it'll get applied to both.

Now I only want these two to be presented if we can expand by tapping on the first image. So I'm

going to create a state variable that I'm going to call is expanded and initialize it as false.

Then I can apply an ontap gesture to that photo image because it's interactive. And then within the action for the ontap gesture, I can with animation toggle the property when tapped.

I can then wrap that group then in an if clause based on is expanded. So when I tap on the button, it expands or it at least reveals those other objects. This looks okay, but we can do better.

I'm going to wrap this entire H stack in a glass effect container. No spacing this time.

to the photo image. I'll apply a glass effect ID and I'll give it the string photo in some name space. So that means I'm going to have to create a name space. So let me do that now.

name space. So that means I'm going to have to create a name space. So let me do that now.

And I can use that in my glass effect ID. Now for the other two images, I'm going to use the same name space, but I'm going to need to change the ID accordingly.

Now also for this group I want to join those two together. So I could use the glass effect union and give the group an ID like one in that same name space.

So tapping the photo image now shows those two images are grouped.

However, I want the transition to come out of the first image and not just kind of gradually appear. So, what I can do is I can apply a glass effect transition and specify that we want a matched geometry.

Now, when I tap on the photo image, the capsule comes out of the photo.

Now I can slow this down the animation by applying a linear animation with a time.

Now when I tap you can see that activity happening.

Let me remove that. Now

one last example now will incorporate a few things that we've learned.

Let's collapse the first h stack and create a second one below it.

I want to create a text field first. So for this I'm going to need a binding to a state string variable. So I'll create one that I'll call text and and I'll just initialize it as an empty string.

And I'm going to require another name space. So I'm going to create a second one.

in that second h stack. Then let me create the text field using the title key string of enter name and the text is going to be bound to our state variable.

I'm going to add some padding and I'll apply a glass effect too.

Let's also add some padding to the ht stack itself. Next to this, I'm going to create another image using the system name plus. This is getting kind of tedious, but I'm going to apply the same size and frame as always. I should probably create a view modifier for that.

But I'm also going to create a glass effect. But I want it to be interactive. So I'm going to have to specify regular so that I can apply or chain the interactive modifier.

Now I also want to have that text field hidden until I tap that image. So I'm going to use the same is expanded boolean and

that image. So I'm going to use the same is expanded boolean and I'm going to enclose the text field in an if clause based on that is expanded.

So now I can use an ontap gesture on that image and then within the action use a width animation to toggle is expanded.

And we want to apply that same transition that we have in the first example. So first I'm going to have to apply a glass effect ID to both items and use the same name space. So for the first I'm going to use a glass effect ID with the ID being text in name space 2 for the text field.

And this is the item that will be transitioning. So I'm going to apply a glass effect transition of match geometry.

And then for the plus image we'll need another glass effect ID. So for this I'll use the ID string of plus but still use the same name space too.

Now it transitions nicely. But one last thing I'm going to use one more technique that I showed in my what's new in SF Symbol 7 video. I'll leave a link in the description. And that's the ability to change the plus icon to something else or replace it with a new transition.

So I'm going to use a turn during operator on is expanded to display a check mark if it is expanded. Otherwise we'll use that plus.

And then to the image I can use a content transition modifier. And I'll

use a symbol effect transition. And I'll specify replace. And this is what's new.

We can use a new move which is a magic move but have a fallback of replace. So now when we tap it, it expands and that plus morphs into a check mark as it expands and back again as it collapses.

That's it. There's lots more to learn about what has changed in Swift UI for OS 26, especially around liquid glass. So, be sure to keep checking my channel for more videos like this. If you found this tutorial helpful, please give it a thumbs up and leave me a comment. You

this. If you found this tutorial helpful, please give it a thumbs up and leave me a comment. You

can subscribe to my channel to get notifications of new videos. And remember that you can also download my YouTube channel listing app for free and quick access to all of my 350 plus YouTube videos. A link's in the description. And also remember I have a full Swift Swift

YouTube videos. A link's in the description. And also remember I have a full Swift Swift UI course available on my Teachable site where you learn how to build a fun multi-targeted app.