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

Storybook failed to load. Please connect to the VPN to access.

                                                        
                                                        
                                                            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>
                                                        
                                                            

API

TabGroup

Name

Description

Type

Default

activeTabValue?

Set the active tab based on its value prop

T

undefined

children

Array of Tab elements

Array<ReactElement<TabProps>> | ReactElement<TabProp>

-

inline?

Tabs use only the needed space. If false Tabs expand and use all the parent available space.

boolean

undefined

underline?

Renders an underline for each Tab. Active tab is always underlined.

boolean

true

showDivider?

Renders a parent full-width divider only for inlined Tabs

boolean

false

className?

Adds a className to the Slider ol element

string

undefined

onTabClick?

Callback for Tab click event

(event: MouseEvent<HTMLElement>, value: T) => void

undefined

Tab

Name

Description

Type

Default

label

Text for the Tab

string

-

value

Unique value for each Tab

string

-

id

Unique id for each Tab

string

-

active?

Defines which Tab is active

boolean

undefined

icon?

Renders an icon before the label

IconName

undefined

inline?

Tabs use only the needed space. If false Tabs expand and use all the parent available space.

boolean

undefined

underline?

Renders an underline for each Tab

boolean

true

notificationsCount?

Renders a Badge with a count in it at the right of the label

number

undefined

onClick?

Callback for Tab click event

(event: MouseEvent<HTMLButtonElement>, value: string) => void

undefined

forwardedRef?

Adds a Ref to the Tab component

Ref<HTMLButtonElement>

undefined

showDivider?

Renders a parent full-width divider only for inlined Tabs

boolean

false

disabled?

Defines if the Tab should render disabled

boolean

false