You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
[Liquid Glass] Design Question: Back Buttons #104547
@shawnborton@dannymcclain@twisterdotcom I've put together a POC: #105130. On iOS 26 the back button chevron now sits on a liquid glass circle, in all the main headers (settings pages, chats including their loading state, and the top bar). Every other platform and older iOS versions stay exactly as they are today.
I waited for the liquid glass FABs (#104989) to be ready so we wouldn't duplicate work, and the POC is built on top of that branch. It reuses the glass we added there, so the back buttons are made of the same material as the FABs.
Here's a recording so you can see how it looks:
Screen.Recording.2026-10-27.at.13.50.41.mov
What do you think? Is this a direction we want to go in, or does it not feel right to you?
I actually don't hate it! Going to build on your PR so we can test, but at first glance I think I might like it?!
Another thing we could try is to use a glass button group in the top right when we see the search icon and Concierge. This would just be a single glass icon in cases where we don't have one or the other. Let me know if that makes sense.
Added my comment on the PR, but I'll copy it here:
Yeah I agree. I think it looks out of place. I think the liquid glass buttons only work well when you do the whole top bar fully liquid glass by having the opposite icons also be liquid glass. Our headers are more old fashion as they also have bottom borders with full solid backgrounds.
It doesn't look as bad as I thought in some instances but I'd think we'd maybe wanna hold off and figure out wider system changes. Like what happens to all our icon buttons, do they get liquid glass too?
Also, sidenote: I've had this issue with our app for ages as the scale and sizing looks super off. The same can be seen here in the way the button is smaller than the other native counterparts. Is there a reason for this? Is it because we're not using the standard native navigationBar or is it something else?
@dubielzyk-expensify@shawnborton Totally agree. If we decide to make the back button liquid glass, I'd do it as part of a wider liquid glass pass on the header (the icons on the right, the bottom border and the solid background), so the back button isn't the only glass element up there. Until then I'll keep #105130 as a draft.
About the size: our headers aren't the native iOS navigation bar. Every header is drawn by our own React Native component, so it doesn't pick up the native sizes and styles. That's where the differences in your screenshot come from:
The circle is 40pt, our standard icon button size, while iOS 26 draws its bar buttons at 44pt.
The chevron is our own BackArrow icon: 20pt, bold with rounded ends, in our gray icon color. iOS uses the chevron.backward SF Symbol, which is thinner and taller and is drawn in the primary text color.
Both can be matched to native in our header, so it'd fit well into that wider header change.
Activity
shawnborton commentedon Oct 21, 2026
Let's have @sumo-slonik try implementing it and see how it feels. I think it might not feel the best but let's try it! cc @Expensify/design
dannymcclain commentedon Oct 21, 2026
Exactly how I feel! 🤝
sumo-slonik commentedon Oct 27, 2026
I'm on it!
sumo-slonik commentedon Oct 27, 2026
@shawnborton @dannymcclain @twisterdotcom I've put together a POC: #105130. On iOS 26 the back button chevron now sits on a liquid glass circle, in all the main headers (settings pages, chats including their loading state, and the top bar). Every other platform and older iOS versions stay exactly as they are today.
I waited for the liquid glass FABs (#104989) to be ready so we wouldn't duplicate work, and the POC is built on top of that branch. It reuses the glass we added there, so the back buttons are made of the same material as the FABs.
Here's a recording so you can see how it looks:
Screen.Recording.2026-10-27.at.13.50.41.mov
What do you think? Is this a direction we want to go in, or does it not feel right to you?
shawnborton commentedon Oct 27, 2026
I actually don't hate it! Going to build on your PR so we can test, but at first glance I think I might like it?!
Another thing we could try is to use a glass button group in the top right when we see the search icon and Concierge. This would just be a single glass icon in cases where we don't have one or the other. Let me know if that makes sense.
shawnborton commentedon Oct 27, 2026
Hmm after using it, maybe I am not as sold. It feels a bit lonely on these kind of pages without the bottom tabs, almost out of of place.
And the shadow is getting cut off too:
Let's see what the other designers think though. Maybe this one isn't worth it.
dubielzyk-expensify commentedon Oct 28, 2026
Added my comment on the PR, but I'll copy it here:
Yeah I agree. I think it looks out of place. I think the liquid glass buttons only work well when you do the whole top bar fully liquid glass by having the opposite icons also be liquid glass. Our headers are more old fashion as they also have bottom borders with full solid backgrounds.
It doesn't look as bad as I thought in some instances but I'd think we'd maybe wanna hold off and figure out wider system changes. Like what happens to all our icon buttons, do they get liquid glass too?
Also, sidenote: I've had this issue with our app for ages as the scale and sizing looks super off. The same can be seen here in the way the button is smaller than the other native counterparts. Is there a reason for this? Is it because we're not using the standard native navigationBar or is it something else?
dannymcclain commentedon Oct 28, 2026
I'm aligned with y'all. I think it looks weird unless we go all glass for the whole top bar.
sumo-slonik commentedon Oct 28, 2026
@dubielzyk-expensify @shawnborton Totally agree. If we decide to make the back button liquid glass, I'd do it as part of a wider liquid glass pass on the header (the icons on the right, the bottom border and the solid background), so the back button isn't the only glass element up there. Until then I'll keep #105130 as a draft.
About the size: our headers aren't the native iOS navigation bar. Every header is drawn by our own React Native component, so it doesn't pick up the native sizes and styles. That's where the differences in your screenshot come from:
BackArrowicon: 20pt, bold with rounded ends, in our gray icon color. iOS uses thechevron.backwardSF Symbol, which is thinner and taller and is drawn in the primary text color.Both can be matched to native in our header, so it'd fit well into that wider header change.
dubielzyk-expensify commentedon Oct 29, 2026
Gotcha. Thanks for the lesson. Yeah let's take a look at a wider liquid glass treatment later and we'll figure out what our strat is.
Thanks for going through and making this. So much better to make a call once you get to play with it! Appreciate it!