SubComponents

Tab

The Tab subcomponent is used to wrap the content and title of each tab.

Tab API

This component extends the native <div> API. That's why the className prop is not included in the table.

Props	Type	Required
value	string	✅
isDisabled	boolean	❌
onClick	(event: React.MouseEvent) => void;	❌
children	ReactNode	❌

value

Necessary for managing the chosen tab, a string that subsequently gets passed to the onChangefunction for reordering the value.

isDisabled

Controls if the tab should show a disabled state.

onClick

Function that is executed when the tab is clicked. Usually used when changing the selectedTab when using a controlled approach.

children

The Tab subcomponent must consistently include Tab.Title and Tab.Content as its child elements.

Divider

Subcomponent employed to visually separate tabs, offering flexibility in its placement.

Divider API

This component extends the native <div> API.

Title

The tab's title, which can either be a string or an HTML structure.

Title API

This component extends the native <div> API. That's why the className prop is not included in the table.

Props	Type	Required
children	ReactNode	✅

children

The children prop can either receive a string or a complete strucure. You can use Badges, Icons and Loaders.

You have the option to use the<TabGroup.Badge />, <TabGroup.Icon />, and <TabGroup.Loader /> without the need for installation or importing. Please note that icons and loaders will consistently maintain a default size that cannot be overridden.

Title with Badge

<TabGroup.Tab value="tab1">
  <TabGroup.Title>
    I am tab 1
    <TabGroup.Badge color="green" isCounter>
      10
    </TabGroup.Badge>
  </TabGroup.Title>
  <TabGroup.Content>Some content at 1</TabGroup.Content>
</TabGroup.Tab>;

Titlte with Icon

<TabGroup.Tab value="tab1">
  <TabGroup.Title>
    I am tab 1
      <TabGroup.Icon iconName='apps' />
  </TabGroup.Title>
  <TabGroup.Content>Some content at 1</TabGroup.Content>
</TabGroup.Tab>;

Title with Loader

<TabGroup.Tab value="tab1">
  <TabGroup.Title>
    I am a title 1
    <TabGroup.Loader />
  </TabGroup.Title>
  <TabGroup.Content>Some content at 1</TabGroup.Content>
</TabGroup.Tab>;

Content

This subcomponent controls the body rendered inside the component, it can be wether a string or an HTML structure.

Content API

This component extends the native <div> API. That's why the className prop is not included in the table.

Props	Type	Required
children	ReactNode	✅

children

The structure/string passed to the subcomponent used to render the content, this can render any structure, including badges, paragraphs, loaders, icons, etc.