Component
MobileTabBar
Filled-icon, label-on tab bar with an active indicator. Replaces the thin-line legacy bar.
9:41
You're on connect
Active tab is gradient indicator + filled icon
The audit flagged the current thin-line tab bar as one of the quietest, most-dated surfaces in the app. This version ships filled icons that scale on activate, a brand-gradient pip above the active tab, and visible labels at all times.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| active | TabId | — | Controlled current tab. Type is 'home' | 'chat' | 'connect' | 'profile' | 'backpack'. |
| onChange | (next: TabId) => void | — | Fires when the user taps a tab. |
| tabs | Tab[] | — | Optional override. Default 5 tabs match today's bar. |
Do / Don't
Do
- Keep five or fewer tabs. Six breaks the rhythm.
- Animate the icon scale on active to give haptic feedback weight.
- Show labels at all times. Pictograms alone are easy to misread.
Don't
- Don't hide labels on scroll. Saves 6px, costs clarity.
- Don't use a pure orange dot for unread. Wrap counts in a brand pill.