Tabs

Use tabs to allow users to navigate easily between views within the same context.

Each tab should contain content that is distinct from other tabs in a set. For example, tabs can present different sections of news, different genres of music, or different themes of documents.

Default

Horizontal variants

Vertical variants

Size: 'small'

Tabs with additional elements

Props for Tabs component

NameTypeRequiredDefaultDescription
itemsReact.ReactElement[]Yes-TabLink/TabLinkFill or any other component provide the tab interaction
sizesmall | mediumNomediumSmall/medium size for tab items
dirltr | rtl | autoNoautoSupport right to left languages
isTopbooleanNofalseUnderline top view. Only for TabLink
isContainerbooleanNofalseSegment control view. Only for TabLinkFill

Props for TabsLink/TabsLinkFill components

NameTypeRequiredDefaultDescription
elementLeftReact.ReactElementNo-Left icon element
countstringNo-Rigth text element
hrefstringNo-The href attribute specifies the link's destination