AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Navigation

Tab Bar

The floating glass bar at the bottom, now with a prominent tab that takes the tint.

Loading preview…

When to use

Use the prominent tab when one action matters more than the rest, like Compose or Record. It takes the separate capsule next to the bar and fills with the tint, so it reads as the main action.

Props

PropValuesDefaultDescription
--tabson .ios-tabbar__bar2 to 5–Number of tabs.
checkedon tab inputboolean–Selected tab.
data-varianton .ios-tabbar__search"prominent"glassFills the separate capsule with the tint. Any tab can use it, not only Search.