The responsive layout is in early preview. Please report any bugs.

Tabs

Twilio's Tabs component.

Status: alpha
Version: 2.0.3
Sources: Github
Storybook
Import from: @twilio-paste/core/tabs — or — @twilio-paste/tabs

Using alpha components in your product

Alpha components are ready for you to use in production. Components such as Tabs are likely to not see any API changes. This is only an alpha due to the lack of documentation and minimal design. Feel free to share your experience using this component at #help-design-system or start a discussion on GitHub.

Guidelines#

About Tabs#

The Tabs component allows a user to flip through multiple views within the same page.

Examples#

Horizontal Tabs#

Tab 1Tab 2Tab 3

const HorizontalTabsExample = () => {
  const selectedId = useUID();
  return (
    <Tabs selectedId={selectedId} baseId="horizontal-tabs-example">
      <TabList aria-label="My tabs">
        <Tab>Tab 1</Tab>
        <Tab disabled>Tab 2</Tab>
        <Tab id={selectedId}>Tab 3</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Tab 1</TabPanel>
        <TabPanel>Tab 2</TabPanel>
        <TabPanel>Tab 3</TabPanel>
      </TabPanels>
    </Tabs>
  );
};


render(
  <HorizontalTabsExample />
)

const HorizontalTabsExample = () => {
  const selectedId = useUID();
  return (
    <Tabs selectedId={selectedId} baseId="horizontal-tabs-example">
      <TabList aria-label="My tabs">
        <Tab>Tab 1</Tab>
        <Tab disabled>Tab 2</Tab>
        <Tab id={selectedId}>Tab 3</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Tab 1</TabPanel>
        <TabPanel>Tab 2</TabPanel>
        <TabPanel>Tab 3</TabPanel>
      </TabPanels>
    </Tabs>
  );
};
render(
  <HorizontalTabsExample />
)

Fitted Tabs#

Fitted tabs allow the tabs to expand and fit the width of a containing element.

Tab 1 is a long tab name because the server sent a long tab nameTab 2

const FittedTabsExample = () => {
  const selectedId = useUID();
  return (
    <Tabs selectedId={selectedId} baseId="fitted-tabs-example" variant="fitted">
      <TabList aria-label="My tabs">
        <Tab>Tab 1 is a long tab name because the server sent a long tab name</Tab>
        <Tab id={selectedId}>Tab 2</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Tab 1</TabPanel>
        <TabPanel>Tab 2</TabPanel>
      </TabPanels>
    </Tabs>
  );
};

render(
  <FittedTabsExample />
)

const FittedTabsExample = () => {
  const selectedId = useUID();
  return (
    <Tabs selectedId={selectedId} baseId="fitted-tabs-example" variant="fitted">
      <TabList aria-label="My tabs">
        <Tab>Tab 1 is a long tab name because the server sent a long tab name</Tab>
        <Tab id={selectedId}>Tab 2</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Tab 1</TabPanel>
        <TabPanel>Tab 2</TabPanel>
      </TabPanels>
    </Tabs>
  );
};
render(
  <FittedTabsExample />
)

Using state hooks#

🚨 ATTENTION!! 🚨

If you decided to use state hooks, the Paste team is NOT responsible for debugging any issues in your application.

The state prop allows you to hook into, and keep in sync the state of the Tabs and the state of your application.

This will allow you to set initial state and merge the returned state from the hook with the application state, and keep it in sync with user interactions.

You could use this if you want to add functionality to a button within the tab content. In the example below we're using the select function from the tab state to advance to the next tab, and go back to the previous tab.

Tab 1Tab 2

const useButtonClickTabState = () => {
  const tab = useTabState();
  return {
    ...tab,
    baseId: 'state-hook-tab-example',
  };
};

const StateHookExample = () => {
  const {...tab} = useButtonClickTabState();
  return (
    <Tabs state={tab}>
      <TabList aria-label="My tabs">
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <Paragraph>Tab 1</Paragraph>
          <Button variant="primary" onClick={() => tab.select('state-hook-tab-example-2')}>
            Go to tab 2
          </Button>
        </TabPanel>
        <TabPanel>
          <Paragraph>Tab 2</Paragraph>
          <Button variant="primary" onClick={() => tab.select('state-hook-tab-example-1')}>
            Go back to tab 1
          </Button>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};


render(
  <StateHookExample />
)

const useButtonClickTabState = () => {
  const tab = useTabState();
  return {
    ...tab,
    baseId: 'state-hook-tab-example',
  };
};
const StateHookExample = () => {
  const {...tab} = useButtonClickTabState();
  return (
    <Tabs state={tab}>
      <TabList aria-label="My tabs">
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <Paragraph>Tab 1</Paragraph>
          <Button variant="primary" onClick={() => tab.select('state-hook-tab-example-2')}>
            Go to tab 2
          </Button>
        </TabPanel>
        <TabPanel>
          <Paragraph>Tab 2</Paragraph>
          <Button variant="primary" onClick={() => tab.select('state-hook-tab-example-1')}>
            Go back to tab 1
          </Button>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
};
render(
  <StateHookExample />
)

Anatomy#

Property	Default token	Modifiable?
Tab label text	Always: $font-size-30, $font-weight-semibold, $line-height-20 Default: $color-text-weak, on hover: $color-text Selected: $color-text-link Disabled: $color-text-weaker	No
Tab Label box	border-bottom (selected tab): $color-border-primary border-bottom (on hover): $color-border-primary-darker Horizontal Tabs padding-top: $space-40 padding-right: $space-20 padding-bottom: $space-40 padding-left: $space-20 margin-right: $space-70 (except for last tab) Fitted Tabs padding-top: $space-40 padding-right: $space-20 padding-bottom: $space-40 padding-left: $space-20	No
Tab List Border	Always: $color-border-light	No

Usage Guide#

API#

Installation#

yarn add @twilio-paste/tabs - or - yarn add @twilio-paste/core

Usage#

import {Tabs, TabList, Tab, TabPanels, TabPanel} from '@twilio-paste/tabs';
const HorizontalTabsExample: React.FC = () => {
  const selectedId = useUID();
  return (
    <Tabs selectedId={selectedId} baseId="horizontal-tabs-example">
      <TabList aria-label="My tabs">
        <Tab>Tab 1</Tab>
        <Tab disabled>Tab 2</Tab>
        <Tab id={selectedId}>Tab 3</Tab>
      </TabList>
      <TabPanels paddingTop="space20">
        <TabPanel>Tab 1</TabPanel>
        <TabPanel>Tab 2</TabPanel>
        <TabPanel>Tab 3</TabPanel>
      </TabPanels>
    </Tabs>
  );
};

Tabs Props#

`variant?: 'fitted' | undefined (default)`

Changes the Tabs' to either fit the width of the containing element or not.

`selectedId?: string | null`

Tells the Tabs which panel to load when it mounts. Important to provide, otherwise the first render may be a little delayed.

`baseId?: string`

Sets the prefix for the auto-generated ids on each Tab and TabPanel. Useful for consistent renders, like for tests.

TabList Props#

`aria-label: string`

Required label for this Tabs component. Titles the entire Tabbing context for screen readers.

Tab Props#

`id?: string | undefined`

Same as the HTML attribute.

`focusable?: boolean | undefined`

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

`disabled?: boolean | undefined`

Same as the HTML attribute.

TabPanels Props#

None available.

TabPanel Props#

`id?: string | undefined`

Same as the HTML attribute.

`tabId?: string | undefined`

The ID of the Tab component this Panel pairs with.

Tabs

Using alpha components in your product

Guidelines.css-1p5xx02{-webkit-text-decoration:none;text-decoration:none;margin-left:0.5rem;color:rgb(96,107,133);}.css-1p5xx02:hover{-webkit-text-decoration:underline;text-decoration:underline;}#

About Tabs#

Examples#

Horizontal Tabs#

Fitted Tabs#

Using state hooks#

🚨 ATTENTION!! 🚨

Anatomy#

Usage Guide#

API#

Installation#

Usage#

Tabs Props#

variant?: 'fitted' | undefined (default)

selectedId?: string | null

baseId?: string

TabList Props#

aria-label: string

Tab Props#

id?: string | undefined

focusable?: boolean | undefined

disabled?: boolean | undefined

TabPanels Props#

TabPanel Props#

id?: string | undefined

tabId?: string | undefined

2.0.3#

Patch Changes#

2.0.2#

Patch Changes#

2.0.1#

Patch Changes#

2.0.0#

Patch Changes#

1.0.2#

Patch Changes#

1.0.1#

Patch Changes#

1.0.0#

Patch Changes#

0.5.2#

Patch Changes#

0.5.1link takes you to an external page (2021-01-25)

Bug Fixes#

Features#

0.4.4link takes you to an external page (2021-01-15)

0.4.3link takes you to an external page (2021-01-14)

0.4.2link takes you to an external page (2021-01-07)

0.4.1link takes you to an external page (2020-12-17)

Bug Fixes#

BREAKING CHANGES#

0.3.33link takes you to an external page (2020-12-15)

0.3.32link takes you to an external page (2020-12-11)

0.3.31link takes you to an external page (2020-12-11)

0.3.30link takes you to an external page (2020-12-09)

0.3.29link takes you to an external page (2020-12-02)

0.3.28link takes you to an external page (2020-11-25)

0.3.27link takes you to an external page (2020-11-11)

0.3.26link takes you to an external page (2020-11-06)

0.3.25link takes you to an external page (2020-11-05)

0.3.24link takes you to an external page (2020-10-27)

0.3.23link takes you to an external page (2020-10-23)

0.3.22link takes you to an external page (2020-10-15)

0.3.21link takes you to an external page (2020-10-13)

0.3.20link takes you to an external page (2020-10-07)

0.3.19link takes you to an external page (2020-10-07)

0.3.18link takes you to an external page (2020-10-07)

0.3.17link takes you to an external page (2020-10-07)

0.3.16link takes you to an external page (2020-09-22)

0.3.15link takes you to an external page (2020-09-21)

0.3.14link takes you to an external page (2020-09-15)

0.3.13link takes you to an external page (2020-09-15)

0.3.12link takes you to an external page (2020-09-08)

0.3.11link takes you to an external page (2020-09-08)

0.3.10link takes you to an external page (2020-09-03)

0.3.9link takes you to an external page (2020-08-31)

0.3.8link takes you to an external page (2020-08-31)

0.3.7link takes you to an external page (2020-08-25)

Guidelines#

`variant?: 'fitted' | undefined (default)`

`selectedId?: string | null`

`baseId?: string`

`aria-label: string`

`id?: string | undefined`

`focusable?: boolean | undefined`

`disabled?: boolean | undefined`

`id?: string | undefined`

`tabId?: string | undefined`

0.5.1 (2021-01-25)

0.4.4 (2021-01-15)

0.4.3 (2021-01-14)

0.4.2 (2021-01-07)

0.4.1 (2020-12-17)

0.3.33 (2020-12-15)

0.3.32 (2020-12-11)

0.3.31 (2020-12-11)

0.3.30 (2020-12-09)

0.3.29 (2020-12-02)

0.3.28 (2020-11-25)

0.3.27 (2020-11-11)

0.3.26 (2020-11-06)

0.3.25 (2020-11-05)

0.3.24 (2020-10-27)

0.3.23 (2020-10-23)

0.3.22 (2020-10-15)

0.3.21 (2020-10-13)

0.3.20 (2020-10-07)

0.3.19 (2020-10-07)

0.3.18 (2020-10-07)

0.3.17 (2020-10-07)

0.3.16 (2020-09-22)

0.3.15 (2020-09-21)

0.3.14 (2020-09-15)

0.3.13 (2020-09-15)

0.3.12 (2020-09-08)

0.3.11 (2020-09-08)

0.3.10 (2020-09-03)

0.3.9 (2020-08-31)

0.3.8 (2020-08-31)

0.3.7 (2020-08-25)

0.3.6 (2020-08-25)

0.3.5 (2020-08-24)

0.3.4 (2020-08-19)

0.3.3 (2020-08-12)

0.3.2 (2020-08-12)

0.3.1 (2020-08-06)

0.2.2 (2020-08-04)

0.2.1 (2020-08-04)

0.1.15 (2020-07-30)

0.1.14 (2020-07-29)

0.1.13 (2020-07-22)

0.1.12 (2020-07-15)

0.1.11 (2020-07-14)

0.1.10 (2020-07-14)

0.1.9 (2020-07-01)

0.1.8 (2020-07-01)

0.1.7 (2020-06-29)

0.1.6 (2020-06-25)

0.1.5 (2020-06-25)

0.1.4 (2020-06-22)

0.1.3 (2020-06-18)

0.1.2 (2020-06-16)

0.1.1 (2020-06-12)