Return to Sky UI homepage

Legacy Tabs - Usage

View on FigmaView on GitHub

The LegacyTabs (Originally named Tabs) has been deprecated. Instead you can use the new Tabs component.

Behaviour

When live, Tabs are set to scroll if the component is wider than the viewport. The text is clipped and a native scrollbar (like below in grey) helps to navigate right/left.

Content overflow on mobile

Alignment

Tabs span full width on 4-column layouts.

Tabs on mobile

On bigger viewports, Tabs sit within the margins.

Tabs on tablet

Depending on the Tabs’ purpose they can sit left aligned or centred, and typically won’t span the whole width. The examples below are downscaled proportionally for illustration purposes.

Tabs in a 12-column grid layout, left-aligned

Tabs in a 12-column grid layout, centre-aligned

Notes on Alignment in Figma

In Figma, Tab items are set to ‘hug’ by default to stretch the text boxes as necessary. Set tabs to ‘fill’ if the viewport is wider than the tab bar to make use of all the available space and increase the hit area.

Colour Usage

The trim can be changed to any gradient from the Sky palette (solid colours other than primary and white are currently not supported).