Tabs

The Tabs system is built on PrimeVue's Tabs, TabList, Tab, TabPanels, and TabPanel components. Three variants are supported via the variant prop on TabList and Tab.

Variants

Variant	Description
(default)	Pill-style tabs inside a rounded container — used for compact navigation
secondary	Underline tabs spanning full width — used for section-level navigation
tertiary	Segmented button-style tabs — used inside panels like the Side Drawer

Primary (Default)

<Tabs value="tab1">
  <TabList>
    <Tab value="tab1">Activity</Tab>
    <Tab value="tab2">Deletion Guide</Tab>
    <Tab value="tab3">Advisories</Tab>
  </TabList>
</Tabs>

Secondary

<Tabs value="tab1">
  <TabList variant="secondary">
    <Tab variant="secondary" value="tab1">Activity</Tab>
    <Tab variant="secondary" value="tab2">Deletion Guide</Tab>
    <Tab variant="secondary" value="tab3">Advisories</Tab>
  </TabList>
</Tabs>

Tertiary

<Tabs value="tab1">
  <TabList variant="tertiary">
    <Tab variant="tertiary" value="tab1">Activity</Tab>
    <Tab variant="tertiary" value="tab2">Deletion Guide</Tab>
    <Tab variant="tertiary" value="tab3">Advisories</Tab>
  </TabList>
</Tabs>

With Tab Panels

<Tabs value="activity">
  <TabList variant="secondary">
    <Tab variant="secondary" value="activity">Activity</Tab>
    <Tab variant="secondary" value="guide">Deletion Guide</Tab>
    <Tab variant="secondary" value="advisories">Advisories</Tab>
  </TabList>
  <TabPanels>
    <TabPanel value="activity"><p>Activity content</p></TabPanel>
    <TabPanel value="guide"><p>Deletion guide content</p></TabPanel>
    <TabPanel value="advisories"><p>Advisories content</p></TabPanel>
  </TabPanels>
</Tabs>

Activity content

Deletion guide content

Advisories content