---
title: Tabs
description: Switch between related views, options, or examples without sending readers to a different section of the page.
---

## Usage

Use tabs when each panel is part of the same decision or workflow. The tab label should describe the content inside the panel, not the visual treatment.

<Tabs aria-label="Deployment environment">
  <TabList>
    <Tab id="preview">Preview</Tab>
    <Tab id="production">Production</Tab>
    <Tab id="rollback">Rollback</Tab>
  </TabList>
  <TabPanel id="preview">
    Preview deployments are created for pull requests and temporary branches. Use them to review changes before merging.
  </TabPanel>
  <TabPanel id="production">
    Production deployments are created from the configured release branch and receive live traffic.
  </TabPanel>
  <TabPanel id="rollback">
    Rollbacks restore a previous production deployment while keeping the current project settings intact.
  </TabPanel>
</Tabs>

```tsx
<Tabs aria-label="Deployment environment">
  <TabList>
    <Tab id="preview">Preview</Tab>
    <Tab id="production">Production</Tab>
    <Tab id="rollback">Rollback</Tab>
  </TabList>
  <TabPanel id="preview">
    Preview deployments are created for pull requests and temporary branches.
  </TabPanel>
  <TabPanel id="production">
    Production deployments are created from the configured release branch.
  </TabPanel>
  <TabPanel id="rollback">
    Rollbacks restore a previous production deployment.
  </TabPanel>
</Tabs>
```

## Keep panels related

Tabs should compare parallel content. Do not hide unrelated instructions behind tabs just to shorten the page.

<Callout type="warning">
  If readers need to complete every panel in sequence, use headings instead of tabs. Tabs are best for alternatives, not required steps.
</Callout>

## Labels

Keep tab labels short. Prefer nouns such as "Preview", "Production", and "Rollback" over sentence-length labels.