yarn add @twilio-paste/tabs - or - yarn add @twilio-paste/core
import {Tabs, TabList, Tab, TabPanels, TabPanel} from '@twilio-paste/core/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>
);
};
baseId
- Type
any
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
HORIZONTAL_TABS" or "VERTICAL_TABS
orientation
- Type
any
selectedId
- Type
any
state
When using the state hook to control the tab set your self, the state prop takes the returned state from the hook.
- Type
TabStateReturn
variant
Changes each Tab to either equally fit the width of the containing element or hug the contents of its label.
- Type
| "fitted" | "inverse" | "inverse_fitted" | "full_width" | "inverse_full_width"
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
aria-label RequiredRequired
Required label for this Tabs component. Titles the entire Tabbing context for screen readers.
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
HORIZONTAL_TAB_LIST" or "VERTICAL_TAB_LIST
variant
Changes each Tab to either equally fit the width of the containing element or hug the contents of its label.
- Type
| "fitted" | "inverse" | "inverse_fitted" | "full_width" | "inverse_full_width"
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
aria-disabled
- Type
any
disabled
Same as HTML attribute.
- Type
any
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
HORIZONTAL_TAB" or "VERTICAL_TAB
focusable
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.
- Type
any
id
Same as the HTML attribute.
- Type
any
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
HORIZONTAL_TAB_PANELS" or "VERTICAL_TAB_PANELS
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
HORIZONTAL_TAB_PANEL" or "VERTICAL_TAB_PANEL
id
Same as the HTML attribute.
- Type
any
paddingTop
Removes the default padding from the TabPanel.
- Type
"space0"
tabId
The ID of the Tab component this Panel pairs with.
- Type
any
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.