Tabs

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

Anatomy

Tabs / Style / Anatomy

Item

Name

Description

Component

Optional

1

Text

Indicates to the user what content is available in the tabs view.

 

 

2

Icon

A decorative static icon supporting the label.

Icon

Yes

3

Badge

Used to display notifications/changes affecting that tab’s content.

Badge

Yes

4

Scroll indicator

Shows when there are more Tabs that overflow the parent container’s width and require scrolling to access all of them.

Icon Button

 

5

Active tab indicator

Indicates the selected Tab.