Tab bar
Mobile bottom tab bar with a sliding active chip, badges, an optional raised centre action and hide-on-scroll, using WAI-ARIA tabs semantics.
Preview
9:41
9:41
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | — | TabBar: selected tab (controlled / uncontrolled). |
| onValueChange | (value: string) => void | — | TabBar: called when a tab is selected by click or arrow key. |
| action | ReactNode | — | TabBar: a TabBarAction placed in the middle, rising out of the bar. |
| scrollContainer | RefObject<HTMLElement> | — | TabBar: hide on scroll down and show on scroll up within this element. |
| label | string | "Main" | TabBar: tab list name. TabBarItem: visible label. TabBarAction: aria-label. |
| icon | ReactNode | — | TabBarItem: 20 px icon above the label. |
| badge | number | — | TabBarItem: ember count on the icon, read as “N new”. Over 99 shows 99+. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.