Tabs

Component

Storybook

Figma Demo

Guidelines

Variations

Tabs are offered in two variants to accommodate different layout needs:

• default Tabs stay aligned start and do not stretch to fill the available space.
• stretch Tabs stretch to fill the available space.

Tabs are also offered in two sizes:

• base (16px)
• sm (14px)

Usage

Both variants of Tabs are visually similar with slightly different use cases.

Use the default variant of Tabs for larger in-page settings where each tab item doesn’t need to stretch to fill the available horizontal space. Note that in these settings an “extension” of the neutral underline may be used to create a stronger boundary between the tabs and content below.

Use the stretch variant of Tabs for smaller in-container settings (such as Task Panel) where the tabs should stretch across to fill the horizontal space evenly. Note that this variant does not have an extension of the neutral underline.

Best Practices

• Ensure that tabs clearly indicate the content they reveal.
• Keep the number of tabs manageable to avoid cluttering the interface.

Accessibility

• Make sure tabs are keyboard navigable and that the selected tab is visually distinguishable.

Content

• Follow content guidelines similar to those specified for links. The tab label should set expectations about what the user will find within that category.

Component Specs

API

• class: string | Default: undefined
  Additional classes to add to the tabs container.

• size: 'sm' | 'default' | Default: 'default'
  The size of the tabs.

Example

<script>
	import { Tabs, Tab } from '@getprovi/craft-svelte';
</script>

<Tabs>
	<Tab label="Tab 1">
		<p>Tab 1 content</p>
	</Tab>
	<Tab label="Tab 2">
		<p>Tab 2 content</p>
	</Tab>
</Tabs>
<Tabs size="sm">
	<Tab label="Tab 1">
		<p>Tab 1 content</p>
	</Tab>
	<Tab label="Tab 2">
		<p>Tab 2 content</p>
	</Tab>
</Tabs>
<Tabs variant="stretch">
	<Tab label="Tab 1">
		<p>Tab 1 content</p>
	</Tab>
	<Tab label="Tab 2">
		<p>Tab 2 content</p>
	</Tab>
</Tabs>

Types

import { Writable } from 'svelte/store';

export interface TabCtxType {
	selected: Writable<HTMLElement>;
}

interface Props {
	class?: string | undefined | null;
	size?: 'sm' | 'default';
	variant?: 'default' | 'stretch';
}