---
title: "Legacy Tabs — React"
canonical: https://sky-ui.cf.sky.com/components/legacy-tabs/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Legacy Tabs — React

Tabs organise content and can switch between pages, or sections on a page.

**Warning:** The `LegacyTabs` (originally named `Tabs`) component has been deprecated and will be removed in a future release. Please switch to using the
  [`Tabs`](/components/tabs/) component or the [`NavBar`](/components/navigation-bar/) component as appropriate.

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

---

Add `$active` to indicate current selection

```tsx
<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

```tsx
<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.

```tsx

<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](/foundations/gradients/).

**Note:** Takes Precedence over `Tabs` `$appearance`

```tsx

<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:

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [margin](/core/system/margin/)
- [width](/core/system/width/)