Tabs

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

By default, tabs will provide an accessible skip link, and overflow with horizontal scrolling.

TabLink or TabLinkFill components provides the tab interaction. The components renders as an anchor tag, accepting the standard attributes. You also can wrap these components in custom Link component for a specific router.

Below provides examples of different Tabs types:

Underline

Overline

Filled

Segment control

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