Tab bar

Bottom navigation for top-level sections. The mobile counterpart to the desktop Sidebar: the active item colours its icon and label with the accent and sets aria-current, so the current section reads by colour and text — never a bare dot.

Example

<TabBar aria-label="Sections">  <TabBarItem icon={<Home />} label="Home" active={tab === 'home'} onClick={() => setTab('home')} />  <TabBarItem icon={<Inbox />} label="Inbox" count={4} active={tab === 'inbox'} onClick={() => setTab('inbox')} />  <TabBarItem icon={<User />} label="Me" active={tab === 'me'} onClick={() => setTab('me')} /></TabBar>

TabBarItem is polymorphic through the render prop — pass a framework link element to make it navigate instead of firing an onClick.

Props

Prop	Type	Default	Notes
`TabBarItem.label`	`ReactNode`	—	Text under the icon; required.
`TabBarItem.icon`	`ReactNode`	—	Icon stacked above the label.
`TabBarItem.active`	`boolean`	`false`	Accent colour + aria-current="page".
`TabBarItem.count`	`number`	—	Badge over the icon; shown only when positive.
`TabBarItem.render`	`ReactElement`	—	Render as a link instead of a button.