Tab

<State initial={{ active: '1' }}>
  {({ state, setState }) => (
    <div>
      <Tab
        isActive={state.active === '1'}
        onClick={() => setState({ active: '1' })}
      >
        Tab 1
      </Tab>
      <Tab
        isActive={state.active === '2'}
        onClick={() => setState({ active: '2' })}
      >
        Tab 2
      </Tab>
      <Tab
        isActive={state.active === '3'}
        onClick={() => setState({ active: '3' })}
      >
        Tab 3
      </Tab>
    </div>
  )}
</State>

<Tab
  as="a"
  href="https://www.kw.com"
  target="_blank"
  isActive={
    typeof window !== 'undefined' &&
    window.location.pathname === '/components/tab'
  }
>
  I'm a Link!
</Tab>
<Tab as="a" href="https://www.kw.com" target="_blank">
  So am I
</Tab>