## Bottom Tab Bar (S—194)

A mobile tab bar with a sliding indicator, badges that clear on visit, a centre create button and tap-again-to-top.

- URL: https://sundaeui.dev/components/bottom-tab-bar
- Category: Navigation & menus · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/bottom-tab-bar.json`
- Tags: badge, app-shell, bottom-navigation, tab-bar, navigation, mobile

Five destinations sit in thumb reach. The indicator slides to the active tab; a badge clears when you open its tab.
Tapping the active tab again scrolls its content back to the top, like native apps. The centre button opens a create sheet.

### Usage

```tsx
import { BottomTabBar } from '@/components/sundae/bottom-tab-bar'

<BottomTabBar />
```

### Props

- `tabs` (`{ id: string; label: string; badge?: number }[]`): Destinations.
- `value / onValueChange` (`string`): Active tab.
- `onCreate` (`() => void`): Centre button.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Mobile apps and PWAs with three to five top-level destinations.

### When not to use

- Desktop layouts: use a sidebar or top nav.
- More than five destinations.

### Accessibility

- A tablist with labelled tabs; badges are part of each label (“Inbox, 3 new”).
- Left/Right arrows move between tabs.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Previous / next tab