Components / navigation

Tab

Single tab used inside the Tabs bar. Line for page-level sections, Pill for compact in-card switching.

import { Tab } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Tab } from '@basiiik/ui';

<Tab value="overview">Overview</Tab>

• Example values were filled in for the required prop value: replace them with your own.
• Default, Hover and Focused are CSS. Selected is aria-selected, driven by the parent Tabs value. Disabled uses the disabled attribute.
• Storybook: Navigation/Tabs.

Props

States. Default, Hover and Focused are CSS. Selected is aria-selected, driven by the parent Tabs value. Disabled uses the disabled attribute.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Items inside Tabs

Do not use it when

• Page-to-page navigation (use Link or Sidebar Item)

Rules for agents

• Use Tab only inside a TabList within Tabs
• Give every Tab a unique value that matches one TabPanel
• icon is decorative and goes next to the label, never instead of it

Avoid

• A Tab with no matching TabPanel
• Icon-only Tabs
• Adding an onClick to a Tab to navigate to another page (use Link)

Writing the content

• One or two words, a noun
• Use sentence case

Keyboard

• Arrow keys move between tabs
• Home and End jump

Accessibility

• aria-selected on the active tab
• aria-controls the panel id

Colour tokens it reads

Related

• Tabs

navigation 10 Figma variants Try it in the live demo