In this lesson, we're going to add this nice little floating plus icon for creating new trips. So this kind of element that floats above the rest of the content on the page has a very unconventional name — it's called a floating group.

So this floating group gives us a few interesting properties where we want it to float relative to. So right now it's shunting itself up to the top of the view. I can instead say, "Hey, I want you to be down the bottom." And then also, if we change the width slightly — let's just give it sort of 80 pixels by 80 pixels — there's our floating group.

We can decide whether we want it to be on the left-hand side of the view or on the right-hand side of the view. And let me just give it some color here so we can see it very clearly when we go into our preview mode. And there you can see it is floating just as we expected.

And so we can test this out. You know what you can always do? Just create some test data within this app data section. That's just going to give us a few extra entries to scroll through. For the date field, you can actually just copy one of the existing created dates, paste that in to the start date — gets you at least halfway there. And I'm going to tick "hide this message later on" to save me some time.

And so now you see that as I'm scrolling, this little red cube is staying hovered above the screen. Now I don't want it to be hard up against the edge here, so what I'm going to do is I'm going to change some of the margin settings here. I'm going to push it out from the right margin by 24 pixels and push it away from my tab bar by 40 pixels.

And then the next thing I want to do is actually add my plus icon in there. Now, the easiest way to do this is actually to use a button element. And with a button, you can choose whether you want to display a label for the button, an icon, or an icon and a label. I'm just going to set this to be an icon.

And we're going to search here within the Phosphor library for an icon called a plus. And I want this to be fairly large and clickable, so I'm going to give it a fixed width and a fixed height, make it a perfect square of 64 pixels. Remember that 8-point grid that we mentioned earlier — 64 pixels is a multiple of 8.

And then we just want to give it a roundness that's going to turn it into a perfect circle. Now technically, you only need to add a roundness that is half of the width and height to make it a perfect circle, but if you're lazy like me, you just chuck in some value that you know is way larger than the width and the height.

And we can get rid of this silly background color for the floating group as well and actually make it shrink its width and height to fit the button. So I'm going to get rid of this minimum height, because I know that with "fit height to content" on, that's going to make the bottom of this floating group match the bottom of the icon.

So that's looking okay, but the icon is a little small for my liking, so I might bump that up to 40 pixels. And there we have it — our lovely little floating icon button.

Now, in the next lesson, we're going to add the logic that allows a modal to open whenever our floating button is clicked. See you there.