Tabs

Anatomy

<Tabs>
  <TabsList>
    <TabsTrigger />
  </TabsList>
  <TabsContent />
</Tabs>

Usage

To display a set of tabs, compose <Tabs>, <TabsList>, <TabsTrigger>, and <TabsContent>. You must set matching value props for <TabsTrigger> and <TabsContent> to link them together. You will probably want to set a defaultValue on <Tabs> to initialize the default tab.

AccountDocumentsSettings

Make changes to your account.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";

export default () => (
  <Tabs defaultValue="account">
    <TabsList>
      <TabsTrigger value="account">Account</TabsTrigger>
      <TabsTrigger value="documents">Documents</TabsTrigger>
      <TabsTrigger value="settings">Settings</TabsTrigger>
    </TabsList>
    <TabsContent value="account">Make changes to your account.</TabsContent>
    <TabsContent value="documents">Access and update documents.</TabsContent>
    <TabsContent value="settings">Edit settings or contact info.</TabsContent>
  </Tabs>
);

Variants

The default variant of <TabsList> is "underline". To display tabs styled like switches, set variant to "switch".

AccountDocumentsSettings

Make changes to your account.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";

export default () => (
  <Tabs defaultValue="account">
    <TabsList variant="switch">
      <TabsTrigger value="account">Account</TabsTrigger>
      <TabsTrigger value="documents">Documents</TabsTrigger>
      <TabsTrigger value="settings">Settings</TabsTrigger>
    </TabsList>
    <TabsContent value="account">Make changes to your account.</TabsContent>
    <TabsContent value="documents">Access and update documents.</TabsContent>
    <TabsContent value="settings">Edit settings or contact info.</TabsContent>
  </Tabs>
);

Switch or underline?

As a rule of thumb:

• Use underline for displaying different content groups that share a common parent. It works best on views that are large and content-heavy.
• Use switch for displaying different modes that change how you view the same content. It works best for smaller viewports.

Note that the switch variant will stretch to fill its container; the underline variant will not.

Tab counts

Display counts beside a tab by passing a value to count on <TabsTrigger>.

AccountDocuments48Settings

Make changes to your account.

AccountDocuments48Settings

Make changes to your account.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";

export default () => (
  <Tabs defaultValue="account">
    <div className="flex flex-col items-center gap-10">
      <div>
        <TabsList>
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="documents" count={48}>
            Documents
          </TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
        <TabsContent value="account">Make changes to your account.</TabsContent>
        <TabsContent value="documents">
          Access and update documents.
        </TabsContent>
        <TabsContent value="settings">
          Edit settings or contact info.
        </TabsContent>
      </div>
      <div>
        <TabsList variant="switch">
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="documents" count={48}>
            Documents
          </TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
        <TabsContent value="account">Make changes to your account.</TabsContent>
        <TabsContent value="documents">
          Access and update documents.
        </TabsContent>
        <TabsContent value="settings">
          Edit settings or contact info.
        </TabsContent>
      </div>
    </div>
  </Tabs>
);

Icons

Import any icons from Font Awesome and pass them to the icon prop on <TabsTrigger>.

AccountDocuments48Settings

Make changes to your account.

AccountDocuments48Settings

Make changes to your account.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";
import { faUser, faFile, faSliders } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <Tabs defaultValue="account">
    <div className="flex flex-col items-center gap-10">
      <div>
        <TabsList>
          <TabsTrigger value="account" icon={faUser}>
            Account
          </TabsTrigger>
          <TabsTrigger value="documents" icon={faFile} count={48}>
            Documents
          </TabsTrigger>
          <TabsTrigger value="settings" icon={faSliders}>
            Settings
          </TabsTrigger>
        </TabsList>
        <TabsContent value="account">Make changes to your account.</TabsContent>
        <TabsContent value="documents">
          Access and update documents.
        </TabsContent>
        <TabsContent value="settings">
          Edit settings or contact info.
        </TabsContent>
      </div>
      <div>
        <TabsList variant="switch">
          <TabsTrigger value="account" icon={faUser}>
            Account
          </TabsTrigger>
          <TabsTrigger value="documents" icon={faFile} count={48}>
            Documents
          </TabsTrigger>
          <TabsTrigger value="settings" icon={faSliders}>
            Settings
          </TabsTrigger>
        </TabsList>
        <TabsContent value="account">Make changes to your account.</TabsContent>
        <TabsContent value="documents">
          Access and update documents.
        </TabsContent>
        <TabsContent value="settings">
          Edit settings or contact info.
        </TabsContent>
      </div>
    </div>
  </Tabs>
);

Dark mode

Set theme to dark to display the tabs on a dark background.

AccountDocuments48Settings

Make changes to your account.

AccountDocuments48Settings

Make changes to your account.

Disabled

Individual tabs can be disabled by setting disabled on <TabsTrigger>.

AccountDocuments48Settings

Make changes to your account.

AccountDocuments48Settings

Make changes to your account.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";
import { faUser, faFile, faSliders } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <Tabs defaultValue="account">
    <div className="flex flex-col items-center gap-10">
      <div>
        <TabsList>
          <TabsTrigger value="account" icon={faUser}>
            Account
          </TabsTrigger>
          <TabsTrigger value="documents" icon={faFile} count={48} disabled>
            Documents
          </TabsTrigger>
          <TabsTrigger value="settings" icon={faSliders}>
            Settings
          </TabsTrigger>
        </TabsList>
        <TabsContent value="account">Make changes to your account.</TabsContent>
        <TabsContent value="documents">
          Access and update documents.
        </TabsContent>
        <TabsContent value="settings">
          Edit settings or contact info.
        </TabsContent>
      </div>
      <div>
        <TabsList variant="switch">
          <TabsTrigger value="account" icon={faUser}>
            Account
          </TabsTrigger>
          <TabsTrigger value="documents" icon={faFile} count={48} disabled>
            Documents
          </TabsTrigger>
          <TabsTrigger value="settings" icon={faSliders}>
            Settings
          </TabsTrigger>
        </TabsList>
        <TabsContent value="account">Make changes to your account.</TabsContent>
        <TabsContent value="documents">
          Access and update documents.
        </TabsContent>
        <TabsContent value="settings">
          Edit settings or contact info.
        </TabsContent>
      </div>
    </div>
  </Tabs>
);

Orientation

Not supported

Setting orientation="vertical" is not currently supported. Work is ticketed to design and support this prop in DS-351.

API Reference

Tabs

Contains all the tabs component parts.

Inherits properties from HTMLElement.

Prop	Type	Default
activationMode	"automatic""manual"
asChild	boolean	false
defaultValue	string
onValueChange	(value: string) => void
orientation	"horizontal""vertical"	"horizontal"
theme	"light""dark"	"light"
value	string

TabsList

Contains the triggers that are aligned along the edge of the active content.

Inherits properties from HTMLElement.

Prop	Type	Default
asChild	boolean	false
className	string
loop	boolean	true
variant	"underline""switch"	"underline"

TabsTrigger

The button that activates its associated content.

Inherits properties from HTMLButtonElement.

Prop	Type	Default
value	string
asChild	boolean	false
count	numberstring
disabled	boolean	false
icon	IconDefinition

TabsContent

Contains the content associated with each trigger.

Inherits properties from HTMLElement.

Prop	Type	Default
value	string
asChild	boolean	false
className	string
forceMount	boolean