Skip to main content

Tabs

Tabs is a stateless component. This means that you will need to provide that stateful wrapper around it. You'll need to provide the activeDataId prop back to the component on each onTabClick. Also, the tab content will need to be swapped out when the active tab changes.

Result
Loading...
Live Editor
function Demo() {
	const tabsList = [
		<Tab key="Ownership" id="Ownership">
			Ownership Content
		</Tab>,
		<Tab key="Fees" id="Fees" disabled>
			Fees Content
		</Tab>,
		<Tab key="Realization" id="Realization">
			Realization Content
		</Tab>,
		<Tab
			key="Holdings"
			id="Holdings"
			disabled
			tooltipProps={{
				title: 'Tooltip',
				container: () => document.querySelector('#demo-component-one'),
			}}
		>
			Holdings Content
		</Tab>,
		<Tab key="AssetMix" id="AssetMix">
			Asset Mix Content
		</Tab>,
		<Tab key="AccountHistory" id="AccountHistory">
			Account History Content
		</Tab>,
		<Tab key="SubAccounts" id="SubAccounts">
			Sub-Accounts Content
		</Tab>,
		<Tab key="Notes" id="Notes">
			Notes Content
		</Tab>,
		<Tab key="Retirement" id="Retirement">
			Retirement / Investment Content
		</Tab>,
		<Tab key="Another" id="Another">
			Another Content
		</Tab>,
	];

	const tabContent = {
		Ownership: 'Ownership Content',
		Fees: 'Fees Content',
		Realization: 'Realization Content',
		Holdings: 'Holdings Content',
		AssetMix: 'Asset Mix Content',
		AccountHistory: 'Account History Content',
		SubAccounts: 'Sub-Accounts Content',
		Notes: 'Notes Content',
		Retirement: 'Retirement / Investment Content',
		Another: 'Another Content',
	};

	const [activeTabId, setActiveTabId] = React.useState('Ownership');

	return (
		<Tabs
			id="demo-component-one"
			tabs={tabsList}
			activeTabId={activeTabId}
			onTabClick={(event, id) => {
				setActiveTabId(id);
			}}
		>
			<div style={{ paddingTop: '20px' }}>{tabContent[activeTabId]}</div>
		</Tabs>
	);
}

Variants​

Tabs​

Tabs will be rendered as a list of underlined elements.

Result
Loading...
Live Editor
const tabsList = [
	<Tab key="Ownership" id="Ownership">
		Ownership Content
	</Tab>,
	<Tab key="Fees" id="Fees">
		Fees Content
	</Tab>,
	<Tab key="Realization" id="Realization">
		Realization Content
	</Tab>,
	<Tab key="Holdings" id="Holdings">
		Holdings Content
	</Tab>,
];

function Demo() {
	const [activeTabId, setActiveTabId] = React.useState('Ownership');

	return (
		<div data-testid="pw-tabs">
			<Tabs
				variant="tabs"
				tabs={tabsList}
				activeTabId={activeTabId}
				onTabClick={(event, id) => {
					setActiveTabId(id);
				}}
			></Tabs>
		</div>
	);
}

render(<Demo />);

Underline​

Underline will be rendered similiarly to tabs but will have a solid underline across all tabs.

Result
Loading...
Live Editor
const tabsList = [
	<Tab key="Ownership" id="Ownership">
		Ownership Content
	</Tab>,
	<Tab key="Fees" id="Fees">
		Fees Content
	</Tab>,
	<Tab key="Realization" id="Realization">
		Realization Content
	</Tab>,
	<Tab key="Holdings" id="Holdings">
		Holdings Content
	</Tab>,
];

function Demo() {
	const [activeTabId, setActiveTabId] = React.useState('Ownership');

	return (
		<div data-testid="pw-tabs-underline">
			<Tabs
				variant="underline"
				tabs={tabsList}
				activeTabId={activeTabId}
				onTabClick={(event, id) => {
					setActiveTabId(id);
				}}
			></Tabs>
		</div>
	);
}

render(<Demo />);

Pills​

Pills will be rendered as a list of rounded elements.

Result
Loading...
Live Editor
const tabsList = [
	<Tab key="Ownership" id="Ownership">
		Ownership Content
	</Tab>,
	<Tab key="Fees" id="Fees">
		Fees Content
	</Tab>,
	<Tab key="Realization" id="Realization">
		Realization Content
	</Tab>,
	<Tab key="Holdings" id="Holdings">
		Holdings Content
	</Tab>,
];

function Demo() {
	const [activeTabId, setActiveTabId] = React.useState('Ownership');

	return (
		<div data-testid="pw-tabs-pills">
			<Tabs
				variant="pills"
				tabs={tabsList}
				activeTabId={activeTabId}
				onTabClick={(event, id) => {
					setActiveTabId(id);
				}}
			></Tabs>
		</div>
	);
}

render(<Demo />);

Vertical​

Vertical tabs will always be rendered as pills.

Result
Loading...
Live Editor
const tabsList = [
	<Tab key="Ownership" id="Ownership">
		Ownership Content
	</Tab>,
	<Tab key="Fees" id="Fees">
		Fees Content
	</Tab>,
	<Tab key="Realization" id="Realization">
		Realization Content
	</Tab>,
	<Tab key="Holdings" id="Holdings">
		Holdings Content
	</Tab>,
];

function Demo() {
	const [activeTabId, setActiveTabId] = React.useState('Ownership');

	return (
		<div data-testid="pw-tabs-vertical">
			<Tabs
				vertical
				tabs={tabsList}
				activeTabId={activeTabId}
				onTabClick={(event, id) => {
					setActiveTabId(id);
				}}
			></Tabs>
		</div>
	);
}

render(<Demo />);

Sizes​

Tabs can be rendered as small, medium (default), or large.

Result
Loading...
Live Editor
const tabsList = [
	<Tab key="Ownership" id="Ownership">
		Ownership Content
	</Tab>,
	<Tab key="Fees" id="Fees">
		Fees Content
	</Tab>,
	<Tab key="Realization" id="Realization">
		Realization Content
	</Tab>,
	<Tab key="Holdings" id="Holdings">
		Holdings Content
	</Tab>,
];

render(
	<div data-testid="pw-tabs-sizes">
		<Tabs size="sm" tabs={tabsList}></Tabs>
		<Tabs size="md" tabs={tabsList}></Tabs>
		<Tabs size="lg" tabs={tabsList}></Tabs>
	</div>,
);

TabNav​

The TabNav component is used within Tabs but can also be used by itself to create more customized tabs.

Result
Loading...
Live Editor
function Example() {
	// An array of tuples, where the first element is the tab id and the second element is the content
	const tabs = [
		['One', <div id="oneContent">Content of Tab One</div>],
		['Two', <div id="twoContent">Content of Tab Two</div>],
	];

	const [activeTab, setActiveTab] = React.useState('One');

	const handleTabClick = (event, tabId) => {
		setActiveTab(tabId);
	};

	const renderTabContent = () => {
		let activeTabContent;
		tabs.forEach(([id, tabPanel]) => {
			if (id === activeTab) {
				activeTabContent = tabPanel;
			}
		});

		return <div style={{ paddingTop: '20px' }}>{activeTabContent}</div>;
	};

	return (
		<div>
			<TabNav activeTabId={activeTab}>
				{tabs.map(([id]) => (
					<Tab id={id} key={id} onClick={(event) => handleTabClick(event, id)}>
						{id}
					</Tab>
				))}
			</TabNav>

			{renderTabContent()}
		</div>
	);
}

Best Practices​

  • Keep tab labels concise, but descriptive.
  • Avoid using a group of tabs that will exceed the width of the content area at the smallest desktop resolution.
  • Use Title Case for tab text.
  • Items in a tab group should be ordered by priority or hierarchy. For longer groups (10 items or greater), consider using alphabetical order.
  • Avoid using the same word to start multiple tabs within the group.

Analytics​

The Tabs component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Tabs',
	actions: {
		onTabClick: { type: 'TABS_ONTABCLICK', payload: 'Click' },
	},
};

Props​

Tabs​

TabNav​

Tab​