Falcon UI

tabs

Tabs and Tab components by default render as <ul> and <li> elements and ship with secondary variant.

xxxxxxxxxx
 
import { Tabs, Tab } from '@deity/falcon-ui';

One
Two
Three

Variant: secondary

One
Two
Three

 
<State initial={{ activeIndex: 0, tabs: ['One', 'Two', 'Three'] }}>
  {({ state, setState }) => (
    <Tabs>
      {state.tabs.map((tab, index) => (
        <Tab
          active={index === state.activeIndex}
          onClick={() => setState({ activeIndex: index })}
        >
          {tab}
        </Tab>
      ))}
    </Tabs>
  )}
</State>
<Text mt="xxxl" mb="xs">
  Variant: secondary
</Text>
<State initial={{ activeIndex: 0, tabs: ['One', 'Two', 'Three'] }}>
  {({ state, setState }) => (
    <Tabs variant="secondary">
      {state.tabs.map((tab, index) => (
        <Tab
          variant="secondary"
          active={index === state.activeIndex}
          onClick={() => setState({ activeIndex: index })}
        >
          {tab}
        </Tab>
      ))}
    </Tabs>
  )}
</State>

Tab specific props

Property	Type	Required	Default	Description
active	boolean	🗸	false	if true tab gets visual active state

Both Tabs and Tab components accept also all of the responsive, theme-based style props.