Tabs - React

View on Figma View on GitHub

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

Props

Prop	Type	Default	Description
$appearance	string	default	The `$appearance` prop sets tab styles for various backgrounds, including a light version for dark backgrounds. It's responsive, allowing breakpoint-specific adjustments. `'default'` \| `'light'`
$fill	boolean	false	Dictates whether the Tabs proportionately fill the available space. This prop is responsive and can be used to set the `$fill` value at different breakpoints.
id	string		The `id` attribute assigns the relevant ARIA attributes to establish a semantic relationship between the Tab and its corresponding Panel.
onTabClick	(index: number) => void		The `onTabClick` callback triggers when a tab is clicked, providing the index of the clicked tab as a number. This enables custom actions based on the specific tab interaction.

Tabs.Tab

Prop	Type	Description
$active	boolean	Indicates the current tab selection.
$hover	boolean	Indicates if a tab is being hovered over.
$theme	string	The theme of the active indicator as a Sky gradient Note: if `$appearance` is set to `light`, the theme will be ignored.

Basic Tabs

Select background colour

<Tabs id="example-1">
    <Tabs.Tab>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
       See who’s at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

<Tabs id="example-1">
    <Tabs.Tab>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
       See who’s at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

Tabs Props

$appearance

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

Select background colour

<Tabs id="example-2" $appearance="light">
    <Tabs.Tab $active>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        <Text $color="white">See who’s at your door from anywhere on your smart phone. Even chat with them.</Text>
    </Tabs.Panel>
    <Tabs.Panel>
        <Text $color="white">The ultimate house sitter. Keeps an eye on any room.</Text>
    </Tabs.Panel>
    <Tabs.Panel>
        <Text $color="white">If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.</Text>
    </Tabs.Panel>
</Tabs>

<Tabs id="example-2" $appearance="light">
    <Tabs.Tab $active>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        <Text $color="white">See who’s at your door from anywhere on your smart phone. Even chat with them.</Text>
    </Tabs.Panel>
    <Tabs.Panel>
        <Text $color="white">The ultimate house sitter. Keeps an eye on any room.</Text>
    </Tabs.Panel>
    <Tabs.Panel>
        <Text $color="white">If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.</Text>
    </Tabs.Panel>
</Tabs>

$fill

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

Select background colour

<Tabs id="example-3" $fill={{ xs: false, md: true }}>
    <Tabs.Tab $active>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        See who’s at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

<Tabs id="example-3" $fill={{ xs: false, md: true }}>
    <Tabs.Tab $active>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        See who’s at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

id

The id attribute sets the appropriate aria attributes to provide semantic relationship between the Tab and Panel.

<Tabs id="example-4">

The id is essential for the Tabs to function correctly and must be a unique value when multiple Tabs are used on a page.

OnTabClick

The onTabClick callback is triggered when a tab is clicked. It receives the index of the clicked tab as a number. This allows you to determine which tab was activated and perform additional actions or updates based on the selected tab.

Select background colour

function Example(){
  const [tabState, setTabState] = React.useState(null);

  const handleTabChange = index => {
    setTabState(index);
  };

  return (
    <Flex $flexDirection="column" $gap={5}>
      <Text>Current Tab index: {tabState}</Text>
      <Tabs id="example-5" onTabClick={handleTabChange}>
        <Tabs.Tab $active>Video Doorbell</Tabs.Tab>
        <Tabs.Tab>Indoor Camera</Tabs.Tab>
        <Tabs.Tab>Motion & Contact Sensors</Tabs.Tab>

        <Tabs.Panel>See who’s at your door from anywhere on your smartphone. Even chat with them.</Tabs.Panel>
        <Tabs.Panel>The ultimate house sitter. Keeps an eye on any room.</Tabs.Panel>
        <Tabs.Panel>If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.</Tabs.Panel>
      </Tabs>
    </Flex>
  );
}

function Example(){
  const [tabState, setTabState] = React.useState(null);

  const handleTabChange = index => {
    setTabState(index);
  };

  return (
    <Flex $flexDirection="column" $gap={5}>
      <Text>Current Tab index: {tabState}</Text>
      <Tabs id="example-5" onTabClick={handleTabChange}>
        <Tabs.Tab $active>Video Doorbell</Tabs.Tab>
        <Tabs.Tab>Indoor Camera</Tabs.Tab>
        <Tabs.Tab>Motion & Contact Sensors</Tabs.Tab>

        <Tabs.Panel>See who’s at your door from anywhere on your smartphone. Even chat with them.</Tabs.Panel>
        <Tabs.Panel>The ultimate house sitter. Keeps an eye on any room.</Tabs.Panel>
        <Tabs.Panel>If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.</Tabs.Panel>
      </Tabs>
    </Flex>
  );
}

Tabs.Tab Props

$active

Add $active to indicate current selection on the initial render.

Note: You can only have one tab with the $active prop. If no tab has the $active prop, the first tab will be set as active by default.

Select background colour

<Tabs id="example-6">
    <Tabs.Tab $active>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        See who’s at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

<Tabs id="example-6">
    <Tabs.Tab $active>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        See who’s at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

$theme

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

Note: Takes Precedence over Tabs $appearance

Select background colour

<Tabs id="example-7">
    <Tabs.Tab $active $theme="sky">
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab $theme="products.tv">
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab $theme="products.broadband">
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        See who’s at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

<Tabs id="example-7">
    <Tabs.Tab $active $theme="sky">
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab $theme="products.tv">
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab $theme="products.broadband">
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        See who’s at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

States

The hover and focus state can be set via $hover and $focused respectively to override default behavior.

Select background colour

<Tabs id="example-8">
    <Tabs.Tab $active>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab $hover>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab $focused>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        See who’s at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

<Tabs id="example-8">
    <Tabs.Tab $active>
        Video Doorbell
    </Tabs.Tab>
    <Tabs.Tab $hover>
        Indoor Camera
    </Tabs.Tab>
    <Tabs.Tab $focused>
        Motion & Contact Sensors
    </Tabs.Tab>

    <Tabs.Panel>
        See who’s at your door from anywhere on your smart phone. Even chat with them.
    </Tabs.Panel>
    <Tabs.Panel>
        The ultimate house sitter. Keeps an eye on any room.
    </Tabs.Panel>
    <Tabs.Panel>
        If something moves or opens when it shouldn’t, you’ll know via the Sky Protect app.
    </Tabs.Panel>
</Tabs>

Tabs with Icons

You can enhance the Tabs component by including Icon for a more visual representation.

Note: Ensure $size is implemented in accordance with guidance.

Select background colour

<Tabs id="example-9">
    <Tabs.Tab $active>
        <Icon src={wifiHouseLinear} $size={{ xs: 'medium', xl: 'large' }} />
        Broadband
    </Tabs.Tab>
    <Tabs.Tab>
        <Icon src={tvLinear} $size={{ xs: 'medium', xl: 'large' }} />
        TV
    </Tabs.Tab>
    <Tabs.Tab>
        <Icon src={mobileLinear} $size={{ xs: 'medium', xl: 'large' }} />
       Mobile
    </Tabs.Tab>

    <Tabs.Panel>
        We’ve got speeds for every household. Check out our broadband plans to find your perfect match.
    </Tabs.Panel>
    <Tabs.Panel>
        Built for the best entertainment. Sky Stream pairs brilliantly with our content. Stream your favourites over WiFi.
    </Tabs.Panel>
    <Tabs.Panel>
        Explore a world of possibilities and switch to Sky Mobile, the award-winning network
    </Tabs.Panel>
</Tabs>

<Tabs id="example-9">
    <Tabs.Tab $active>
        <Icon src={wifiHouseLinear} $size={{ xs: 'medium', xl: 'large' }} />
        Broadband
    </Tabs.Tab>
    <Tabs.Tab>
        <Icon src={tvLinear} $size={{ xs: 'medium', xl: 'large' }} />
        TV
    </Tabs.Tab>
    <Tabs.Tab>
        <Icon src={mobileLinear} $size={{ xs: 'medium', xl: 'large' }} />
       Mobile
    </Tabs.Tab>

    <Tabs.Panel>
        We’ve got speeds for every household. Check out our broadband plans to find your perfect match.
    </Tabs.Panel>
    <Tabs.Panel>
        Built for the best entertainment. Sky Stream pairs brilliantly with our content. Stream your favourites over WiFi.
    </Tabs.Panel>
    <Tabs.Panel>
        Explore a world of possibilities and switch to Sky Mobile, the award-winning network
    </Tabs.Panel>
</Tabs>

System Modifiers

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

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

padding