Tabs

Tabs help to organise information, by grouping it into separate views.

React

Is new design vision part implemented using new tokens?

Update required

Resources

Example


                                                        
                                                        
                                                            import { TabGroup, Tab } from '@optimus-web/core';
                                                        import { IconName } from '@optimus-web/icons';
                                                        
                                                        <TabGroup activeTabValue="1" onTabClick={() => {}} inline underline showDivider={false}>
                                                            <Tab id="1" value="1" label="First" icon={IconName.Profile} notificationsCount={23} />
                                                            <Tab id="2" value="2" label="No badge" icon={IconName.Occupancy} notificationsCount={0} />
                                                            <Tab id="3" value="3" label="Third" icon={IconName.Companies} notificationsCount={6} />
                                                            <Tab id="4" value="4" label="Disabled" icon={IconName.Features} disabled notificationsCount={16} />
                                                            <Tab id="5" value="5" label="Simple" />
                                                        </TabGroup>