Tab

Component

Storybook

Figma Demo

Tab is a Figma component that is exposed through Tabs , but it is hidden from getting published in the Craft library as it is not required by designers.

Guidelines

Variations

Tab items may be either:

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

Usage

When using Tabs, either size prop will surface the relevant set of tabs that compose it.

Best Practices

A tab item should clearly state the intent of the tab and set expectations for the user on how it will change the view.

Accessibility

Ensure that tabs are keyboard navigable and provide clear focus indicators when selected.

Content

As with links and buttons, a tab item should clearly state the intent of the tab and set expectations for the user on how it will change the view.

Component Specs

API

• class: string | Default: undefined
  Class name to be added to the tab content container.

• label: string | Default: ''
  The label of the tab.

• open: boolean | Default: false
  Whether the tab is open or not.

• testId: string | Default: 'test-tab'
  The test id of the tab.

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>

Types

interface Props {
	class?: string | undefined | null;
	label?: string;
	open?: boolean;
	testId?: string;
}