const [tab, setTab] = useState('all');

<TabButton active={tab === 'all'}      onClick={() => setTab('all')}      count={42}>All</TabButton>
<TabButton active={tab === 'active'}   onClick={() => setTab('active')}   count={18}>Active</TabButton>
<TabButton active={tab === 'archived'} onClick={() => setTab('archived')} count={24}>Archived</TabButton>

<TabButton active onClick={...}>Selected</TabButton>
<TabButton active={false} onClick={...}>Default</TabButton>