Newskit Logo

Tabs

Tabs Overview

Tabs component is used as a way of switching between different content panels.

Tabs Usage

Tabs is used for users to alternate between views within the same context, not to navigate to different areas.

The Tab components nested within Tabs should all look and work the same where possible.

Tabs Props

Tabs have a number of props to facilitate a variety of uses:

childrenReact.ReactElement<TabProps>[]
Tabs expects multipleTab components as children.
Refer to the code example below
dividerboolean
Optional dividers between each Tab.
sizeTabSize = TabSize.medium
Optional size of the Tab: Small, Medium or Large.
verticalboolean = false
Allows the Tabs to flow vertically. The Tabs component is laid out horizontally by default.
initialSelectedIndexnumber = 0
Index of the initially selected tab
distributionTabsDistribution = TabsDistribution.LeftStacked
Change the distribution of the tabs.

When flow is set to horizontal:
  • left-stacked Align the Tabs to the left of the content area having the width of the individual tab component defined by the width of their children.

  • fitted-flex Spread all tab children equally across the content area, filling the entire width. Each tab’s width should be defined by that of its child.

  • fitted-equal Space each tab across the content area equally, regardless of the width of its child.


When flow is vertical:
  • left-stacked Align the Tabs to the top of the content area with the height of the individual tab components defined by the height of their children.

  • fitted-flex Spread all tab children equally across the content area, filling the entire height. Each tab’s height should be defined by that of its child.

  • fitted-equal Space each tab across the content area equally, regardless of the height of its child.

overridesobject
If provided, overrides the respective presets for the component and provided elements. Here are the overrides that the Tabs accepts:
stylePresetMQ<string>
If provided, this overrides the style preset applied to the Tabs container.
spaceInsetMQ<string>
The value for this prop should be a spaceInset token, If provided it will inset spacing around the Tabs navigation and Tabs content.
spaceInlineMQ<string>
The value for this prop should be a space token, If provided, this overrides the space between the Tabs navigation and Tabs content
tabBarobject
heightstring
The value for this prop should be a sizing token. If provided, will override the height of the container wrapping the Tab components.
tabBarTrackobject
weightstring
If provided, this sets a fixed weight (height if horizontal, width if vertical) to the tabBarTrack. This can be a sizing token from the theme, or any CSS length value.
tabBarIndicatorobject
lengthstring
If provided, this sets a fixed width to the tabBarIndicator. This can be a sizing token from the theme, or any CSS length value, e.g. 75% of the default full-width.
weightstring
If provided, this sets a fixed weight (height if horizontal, width if vertical) to the tabBarIndicator. This can be a sizing token from the theme, or any CSS length value.
tabPaneobject
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the TabPane.
Refer to the defaults below for the object structure:
{
  stylePreset: "tabs",
  tabBarTrack: {
    stylePreset: "tabBarTrack",
    weight: "borderWidth020"
  },
  tabBarIndicator: {
    stylePreset: "tabBarIndicator",
    weight: "borderWidth020",
    motionDuration: "motionDuration030",
    motionTiming: "motionEaseInAndOut"
  },
  tabPane: {
    typographyPreset: "utilityBody020"
  },
  spaceInline: "space020"
}

Tabs Code Example

Here is an example of how the Tabs and Tab components are used.

Tabs Playground

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Distribution
Size
Tab Bar Track Weight
Tab Bar Indicator Weight
Tab Bar Indicator Length
Style preset overrides
Space inset
tabBar height
divider
vertical
import React from 'react';
import { Tabs } from 'newskit';

export default () => (
  <Tabs
    distribution="left-stacked"
    size="medium"
    overrides={{
      tabBarTrack: {},
      tabBarIndicator: {},
      tabBar: {}
    }}
    initialSelectedIndex={0}
  />
);

Tabs Accessibility

We recommend using the ARIA tab model. This works across all major screen readers and browser combinations. If you are using a screen reader with Javascript turned on, you should be able to navigate the tabs pattern in the following way:

Use the tab key on your keyboard to access the tab labels

Use the return key to select the tab

Arrow Left & Arrow Right (only on horizontal tab orientation) - Move left and right through the enabled tabs and trigger select

Tab Overview

The Tab component is used within the Tabs as a way of switching between different views.

Tab Usage

A Tab is used in a Tabs for users to alternate between views within the same context, not to navigate to different areas. Tabs should all look and work the same where possible.

Tab Props

Tab component has a number of props to facilitate a variety of uses:

childrenReact.ReactNode
Content rendered inside the tab pane.
titleReact.ReactNode
The content of the tab button
disabledboolean = false
If true, the Tab will render the disabled state of the style preset.
ariaLabelstring
The aria-label attribute is to allow a user to describe the action that will be performed when the user interacts with a tab in a Tabs. By default, this could be the primary label text.
overridesobject
If provided, overrides the respective presets for the component and provided elements. Here are the overrides that the Tab accepts:
spaceInsetMQ<string>
If provided, this overrides the padding of the Tab. Otherwise, spaceInsetSquish020 or spaceInsetSquish030 is used depending on the `size` prop.
stylePresetMQ<string>
If provided, this overrides the style preset applied to the Tab.
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the Tab. Otherwise, label020 or label030 is used depending on the `size` prop.
spaceInlineMQ<string>
If provided, this overrides the space between multiple children in the underlying Stack. If less than 2 children are passed, this prop is irrelevant.
iconSizestring
If provided, this overrides the icon size of any child icons. Otherwise, iconSize010, iconSize020 or iconSize030 is used depending on the `size` prop. If no icons are present in the Tab's children then this prop is irrelevant.

Note: You can also set the icon size by passing it directly as a size prop to the icon, but by doing this you will override the iconSize passed from overrides. We discourage this approach but we will keep the functionality in case it is needed.
minHeightstring
If provided, this sets a minimum height to the Tab. This can be a sizing token from the theme, or any CSS length value. By default, sizing060, sizing080 or sizing090 is used depending on the `size` prop.
Refer to the defaults below for the object structure:
{
  small: {
    stylePreset: "tab",
    typographyPreset: "utilityLabel010",
    spaceInset: "spaceInsetSquish020",
    minHeight: "sizing060",
    iconSize: "iconSize010",
    spaceInline: "space020"
  },
  medium: {
    stylePreset: "tab",
    typographyPreset: "utilityLabel020",
    spaceInset: "spaceInsetSquish030",
    minHeight: "sizing080",
    iconSize: "iconSize020",
    spaceInline: "space020"
  },
  large: {
    stylePreset: "tab",
    typographyPreset: "utilityLabel030",
    spaceInset: "spaceInsetSquish030",
    minHeight: "sizing090",
    iconSize: "iconSize030",
    spaceInline: "space020"
  }
}

Tab Accessibility

We recommend using the ARIA tab model. This works across all major screen readers and browser combinations.

Add aria-label prop to allow a user to describe the action that will be performed when the user interacts with a Tab.
By default, this could be the primary label text.
Where there are no text labels, the icon will need to be assigned a name.

SEO

Ensure icons have alt text.