Segmented Control

SegmentedControl is a similar component to the Tab, with a different styling. There’s one major difference though: While you can use several tabs in a group and have them with a horizontal scroll functionality, segmented controls by design should not be horizontally scrollable. Because of this, it’s not recommended to use more than 3 of them in a group.

#Usage

Here's an example on how to use the SegmentedControl component with a Tag inside the tab label. You can also use icons or other elements as a prefix or suffix, the container of tabLabel will already be styled with a gap and alignment for you. Use the Tabs.Panel component in the same way as in the Tabs component. To adjust the width of the SegmentedControl, set the parent container to the desired width.

import { SegmentedControl, Tabs, Tag } from '@kinsta/stratus'

const MyComponent = () => {
  const [activeIndex, setActiveIndex] = useState(0)

  return (
      <>
        <SegmentedControl
          activeIndex={activeIndex}
          onChange={setActiveIndex}
          size="m"
        >
          {/*Here's an example on how to add a Tag inside the tab label*/}
          <Tabs.Panel
            tabLabel={
              <>
                <div>First tab</div>
                <Tag theme="unicorn" size="s">
                  Tag
                </Tag>
              </>
            }
          >
            Tab content
          </Tabs.Panel>
          {/*Here's an example on a tab without content*/}
          <Tabs.Panel tabLabel="No content" />
        </SegmentedControl>
        {/*If you want to use the Segmented Control with a chart that displays different data
        based on the active tab, place them outside the Segmented Control component: */}
        <Chart data={chartData[activeIndex]} />
      </>
  )
}
Copy

#Segmented Control Props

#Types

• SegmentedControlProps: props of the SegmentedControl component processed by stratus
• TabPanelInterface: props of the Tab.Panel component extended by HTMLAttributes<HTMLDivElement>

Read more about types here

#See also

• Tabs