Tabs

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.

Preview deployments are created for pull requests and temporary branches. Use them to review changes before merging.

<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.

If readers need to complete every panel in sequence, use headings instead of tabs. Tabs are best for alternatives, not required steps.

Labels

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

Was this page helpful?