Tab

Last Update : 14 August, 2023 | Published : 01 July, 2023 | 1 Min Read

Tab - can be used to create secondary navigation for your page. Tabs can also be used to navigate withing the same page taht is to render and display subsections for your website.

Import

import Tab from '@intelops/intelops_ui/packages/react/components/Tab/src';

Create a Tab

<Tab
    tabDetails={[
        {
            id: 1,
            label: "App",
            url: "#",
            icon: <ChartPieIcon className="w-6 h-6" color="red"/>, 
        },
        {
            id: 2,
            label: "Messages",
            url: "#",
            icon: <UserGroupIcon className="w-6 h-6" color="red"/>,
        },
        {
            id: 3,
            label: "Settings",
            url: "#",
            icon: <ServerIcon className="w-6 h-6" color="red"/>,
        },
    ]}
/>

Props

NameTypeDescription
idstringUnique to each element can be used to lookup an element getElementById( )
classNamestringTo add new or to override the applied styles
labelstringName of the tab element
urlstringUrl or the page that the user will be taken to on selecting the tab element
iconstringIcon for the tab element - may need a seperate className

Looking for Cloud-Native Implementation?

Finding the right talent is pain. More so, keeping up with concepts, culture, technology and tools. We all have been there. Our AI-based automated solutions helps eliminate these issues, making your teams lives easy.

Contact Us