NewsKit Mobile Logo

Tab

Tab Overview

The tab component is used within the tab group as a way of switching between different views.

Tab Usage

A tab is used in a tab group 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

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

childrenstring
The label of the Tab is passed as the child of the component.
sizeTabSize = TabSize.medium
Optional size of the Tab: Small, Medium or Large.
disabledboolean = false
If true, the Tab will render the disabled state of the style preset.
isSelectedboolean = false
If true, the Tab will render the selected 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 tab group. 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 Playground

Props
Size
Disabled
Selected
import React from 'react';
import { Tab } from 'newskit';

export default () => <Tab size="small" />;

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 in a tab group.
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.

Tab Group Overview

Tab Group consists of tabs and is used as a way of switching between different content panels.

Tab Group Usage

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

Tab Group Props

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

childrenstring
Tab that are passed as the child of the component.
dividerboolean
Optional dividers between Tabs.
sizeTabSize = TabSize.medium
Optional size of the Tab: Small, Medium or Large.
tabPanesarray
Array of Tab Panes, containing the content for each view.
verticalboolean
Allows the Tab Group to flow vertically. The Tab Group is laid out horizontally by default.
overridesobject
If provided, overrides the respective presets for the component and provided elements. Here are the overrides that the Tab Group accepts:
stylePresetMQ<string>
If provided, this overrides the style preset applied to the Tab Group.
Refer to the defaults below for the object structure:
{
  stylePreset: "tabGroup"
}

Tab Group Playground

First tab content

Props
Size
divider
vertical
import React from 'react';
import { TabGroup } from 'newskit';

export default () => <TabGroup size="medium" />;

Tab Group 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