Return to Sky UI homepage
Tabs

Overview

View on FigmaView on GitHub

Purpose

Tabs are used to organise and switch between blocks of related content underneath. They enable the user to discover additional content on the page.

They should not be used for navigation within or between different pages.

Anatomy

The Tabs component can be broken down into the following elements -

  1. 1
  2. 2
  3. 3

  1. Text label

    The text label describes the content of the tab to the user.

  2. Trim

    The trim shows the user which tab is selected.

  3. Horizontal line

    This line spans the whole with of the Tab component, to keep the items visually connected.

Variants & States

  • Appearance: Default, Light
  • Breakpoint: Mobile, Tablet, Desktop
  • # of Tabs: 2-6
  • Content overflow: on/off

The Tabs component is made up of individual items.

  • State: Inactive, Active, Hover, Focus
  • Icon: on/off