Fluxo UIFluxo UIv0.4.93

Mobile Tab Bar

Bottom-anchored navigation bar for mobile apps, with badges, active-state icon swaps, and four visual variants.

Basic Usage

Bottom tab bar

Mounted at the bottom of a mobile app. Tap or use ←/→ arrow keys to switch tabs.

Active tab: home
import { MobileTabBar } from 'fluxo-ui';

const items = [
    { key: 'home', label: 'Home', icon: <DashboardIcon /> },
    { key: 'search', label: 'Search', icon: <SearchIcon /> },
    { key: 'alerts', label: 'Alerts', icon: <AlertIcon />, badge: 3 },
    { key: 'me', label: 'Me', icon: <UserIcon /> },
];

<MobileTabBar items={items} activeKey={tab} onChange={setTab} />

Variants

Flat

Default — border on top, transparent bar.

 

Elevated

Soft shadow above the bar (instead of a border).

 

Pill

Active tab gets a solid primary pill background.

 

Floating

Detached rounded card with shadow — modern iOS pattern.

 
<MobileTabBar variant="elevated" items={items} activeKey={tab} onChange={setTab} />

Label modes

showLabels="always"

All labels visible — best for first-time users.

showLabels="active"

Only the active label — saves space while preserving context.

showLabels="never"

Icon-only — for tight bars where the icons are universally recognized.

<MobileTabBar showLabels="always" items={items} ... />
<MobileTabBar showLabels="active" items={items} ... />
<MobileTabBar showLabels="never"  items={items} ... />

Import

import { MobileTabBar } from 'fluxo-ui';
import type { MobileTabBarProps, MobileTabBarItem, MobileTabBarVariant, MobileTabBarPosition, MobileTabBarShowLabel } from 'fluxo-ui';

Props

itemsreq
MobileTabBarItem[]

Tab items. Each: { key, label, icon?, activeIcon?, badge?, disabled?, ariaLabel? }.

activeKeyreq
string

Key of the currently active tab.

onChangereq
(key: string) => void

Called when a tab is activated.

variant
'flat' | 'elevated' | 'pill' | 'floating'"'flat'"

Visual style. 'elevated' replaces the top border with a soft shadow; 'pill' fills the active item; 'floating' renders a detached rounded card.

position
'fixed' | 'sticky' | 'static'"'static'"

CSS positioning of the bar.

showLabels
'always' | 'never' | 'active'"'always'"

When to render the text label for each tab.

safeArea
boolean"true"

Apply env(safe-area-inset-bottom) so the bar clears the iOS home indicator.

className
string

Additional CSS class for the bar root.

ariaLabel
string"'Primary'"

Accessible name for the navigation landmark.

Features

Four variants

flat, elevated, pill (active fill), and floating (detached card).

Per-tab badges

Numeric or text badges with a notched ring against the bar.

Active icon swap

Optional activeIcon swaps for a filled variant when the tab is selected.

Label modes

always, active-only, or never — match space constraints.

ARIA tablist + keyboard

←/→/Home/End navigate tabs; aria-selected / aria-disabled wired automatically.

Safe-area-aware

env(safe-area-inset-bottom) padding so the bar clears the iOS home indicator.