Tab

Tabs are used to navigate between different views within the same page or context.

Demo

Usage

When to use

• Navigate between different views in the same context. Use tabs to show several areas of related content.

When not to use

• Comparing content. Don't use tabs to compare content.
• Content with a set order. Don't use tabs to show content or forms that need to be completed in a set order. A user can move back and forth between tabs.

Format

Label

• Use short, easy to understand labels for tabs.
• The label should summarize the content. Content inside a tab should be obvious from it's label.
• Don't repeat the same word across several tabs.

Options

Icon

Demo

<TabBar>
    <Tab icon={<IconSubscribe16 />}>Notifications</Tab>
    <Tab icon={<IconShare16 />} selected>
        Sharing and access
    </Tab>
    <Tab icon={<IconDownload16 />}>Downloads</Tab>
</TabBar>

• A tab can show an icon.
• Use icons to support the text label by providing context or a visual reference.
• Don't include icons for decoration only, they add complexity to the interface.

State: Disabled

Demo

In the example above you can see the 3rd tab is disabled.

<TabBar>
    <Tab>Tab label 1</Tab>
    <Tab selected>Tab label 2</Tab>
    <Tab disabled>Tab label 3</Tab>
    <Tab disabled>Tab label 4</Tab>
</TabBar>

• Use a disabled state if a tab can't be used temporarily.
• Show a Tooltip when hovering a disabled tab to give a short explanation of why the tab can't be used.
• If a tab will never be enabled in the current context, remove it instead.

API Reference

Tab

Usage

To use Tab, you can import the component from the @dhis2/ui library

import { Tab } from '@dhis2/ui'

Props

Name	Type	Default	Required	Description
children	node
className	string
dataTest	string	'dhis2-uicore-tab'
disabled	boolean
icon	element
selected	boolean			Indicates this tab is selected
onClick	function			Called with the signature ({}, event)

TabBar

Usage

To use TabBar, you can import the component from the @dhis2/ui library

import { TabBar } from '@dhis2/ui'

Props

Name	Type	Default	Required	Description
children	node
className	string
dataTest	string	'dhis2-uicore-tabbar'
fixed	boolean			Fixed tabs fill the width of their container. If false (i.e. fluid), tabs take up an amount of space defined by the tab name. Fluid tabs should be used most of the time.
scrollable	boolean			Enables horizontal scrolling for many tabs that don't fit the width of the container