Tabs

Purpose

The Tabs component provides a way to organize high level content on a page. It maps an array of options into clickable tabs for the user.

Basic Implementation

import Tabs from '@wedgekit/tabs';

const Example = () => {
  const [value, setValue] = React.useState('');

  return (
    <Tabs
      value={value}
      onChange={setValue}
      options={[
        { label: 'Option 1', id: 'Option1' },
        { label: 'Option 2', id: 'Option2' },
        { label: 'Option 3', id: 'Option3' },
      ]}
    />
  );
};

render(<Example />);

Props

backgroundColor

Type: ColorTag

Required: ❌

Optional prop to determine the background color of the tab. Defaults to transparent. All ColorTag options can be found here.

backgroundOpacity

Type: number

Required: ❌

Optional prop to determine the opacity of the tab's background color. Must be a number between 0 and 1 inclusive. Defaults to 1.

className

Type: string

Required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

color

Type: ColorTag

Required: ❌

Optional prop to determine the color of the tab text and underline. All ColorTag options can be found here.

options

Type:

{
  href?: string;
  id: string | number;
  label: string;
  badge?: string;
}[]

Required: ✅

If an href is passed in, the Option will be a TabLink. Otherwise, it is a TabButton. An optional badge can be included that will be shown in the tab.

mode

Type: 'navigation' | 'buttons'

Required: ❌

Defaults to navigation mode. Navigation mode has one focusable element and can be navigated with arrow keys. Buttons mode is navigated via tabbing and has a slightly different user experience that is not focused on navigation.

value

Type: string | number

Required: ✅

An Option id used to signify which tab should display as active.

onChange

Type: (tabId: string | number, event: React.SyntheticEvent) => void

Required: ✅

Function that will fire when a tab is clicked or when tab is focused and the enter key or spacebar are pressed.