Skip to main navigationSkip to main content
Return to Sky UI homepage

Legacy Tabs - React

View on FigmaView on GitHub

The LegacyTabs (originally named Tabs) component has been deprecated and will be removed in a future release. Please switch to using the Tabs component or the NavBar component as appropriate.

import { LegacyTabs } from '@sky-uk/ui-core';

Add $active to indicate current selection

<LegacyTabs>
    <LegacyTabs.Tab href="#" $active>One</LegacyTabs.Tab>
    <LegacyTabs.Tab href="#">Two</LegacyTabs.Tab>
    <LegacyTabs.Tab href="#">Three</LegacyTabs.Tab>
</LegacyTabs>

$fill

Set $fill to have Tabs proportionately take up the available space

<LegacyTabs $fill={{xs: false, md: true}}>
    <LegacyTabs.Tab href="#" $active>One</LegacyTabs.Tab>
    <LegacyTabs.Tab href="#">Two</LegacyTabs.Tab>
    <LegacyTabs.Tab href="#">Three</LegacyTabs.Tab>
</LegacyTabs>

$appearance

$appearance can be set to light or default to provide contrast with backgrounds.

<LegacyTabs $appearance="light">
    <LegacyTabs.Tab href="#" $active>Home</LegacyTabs.Tab>
    <LegacyTabs.Tab href="#">TV</LegacyTabs.Tab>
    <LegacyTabs.Tab href="#">Broadband</LegacyTabs.Tab>
    <LegacyTabs.Tab href="#">Mobile</LegacyTabs.Tab>
</LegacyTabs>

$theme

Set $theme on an individual Tab to use any predefined gradient.

Note: Takes Precedence over Tabs $appearance

<LegacyTabs>
    <LegacyTabs.Tab $theme="sky" href="#" $active>Home</LegacyTabs.Tab>
    <LegacyTabs.Tab $theme="products.tv" href="#" >TV</LegacyTabs.Tab>
    <LegacyTabs.Tab $theme="products.broadband" href="#" >Broadband</LegacyTabs.Tab>
    <LegacyTabs.Tab $theme="products.mobile" href="#">Mobile</LegacyTabs.Tab>
</LegacyTabs>

System Modifiers

The Tabs component supports the props applied using the following system modifiers: