---
title: SegmentedTabs
category: General
---

```jsx live
render(
  <SegmentedTabs
    distribution="start"
    tabs={['One', 'Two', 'Three']}
    onChange={(selected) => console.log(selected)}
  />
)
```

```jsx live
const TABS = [
  {
    id: 0,
    label: 'People',
  },
  {
    id: 1,
    label: 'Songs',
  },
  {
    id: 2,
    label: 'Service Length',
  },
]

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeTabId: 1,
    }
  }

  render() {
    return (
      <StackView
        axis="horizontal"
        distribution="center"
        width={120}
        position="relative"
      >
        <SegmentedTabs
          width={48}
          zIndex={5}
          activeTab={(tab) => tab.id === this.state.activeTabId}
          tabs={TABS}
          getTabLabel={(tab) => tab.label}
          onChange={(selected) => {
            console.log('selected tab: ', selected)
            this.setState({ activeTabId: selected.id })
          }}
        />
        <Divider
          margin={0}
          size="2px"
          position="absolute"
          bottom={0}
          zIndex={1}
        />
      </StackView>
    )
  }
}

render(App)
```