Tabs (segmented)

A segmented control tab component with a contained background. Useful for toggling between related views or filters.

Default State

Interactive Disabled State

Size Property

sm

md

Total Cost Content

This is the content for Total Cost

The TabsSegmented component accepts the following props:
- activeTab: The currently selected tab
- setActiveTab: Function to update the active tab
- tabs: Array of tab labels
- tabsSize: Optional size of the tabs ('sm' or 'md') default is 'md'
- disabled: When true, prevents interaction and applies a disabled visual style
- className: Optional styling override

const [activeTab, setActiveTab] = useState('Total Cost')
const [isDisabled, setIsDisabled] = useState(false)
const tabs = ['Total Cost', 'Number of Cancellations']

/* Default usage */
<TabsSegmented
  activeTab={activeTab}
  setActiveTab={setActiveTab}
  tabs={tabs}
/>

/* With disabled state */
<TabsSegmented
  activeTab={activeTab}
  setActiveTab={setActiveTab}
  tabs={tabs}
  disabled={isDisabled}
/>