Tab Bar

Tab bar is used for lateral navigation between multiple sections or elements of the same hierarchy.

Ref to 202:4299

Specifications

  • Labels should be kept short, but if space is insufficient, they will be truncated.
  • Tab labels can be displayed with or without an icon, but keep tab labels in a tab group consistent.
  • Tab groups offer a horizontal scroll (left and right) for both desktop and mobile.

States

Default

Default

Default, hover

Default, hover

Default, disabled

Default, disabled

Active

Active

Active, hover

Active, hover

Active, disabled

Active, disabled

Horizontal scroll

Horizontal scroll on mobile

Horizontal scroll on mobile

Horizontal scroll on desktop

Horizontal scroll on desktop