Skip to content
Telescope
Components

Tabs

Tabs are labeled controls that allow users to switch between multiple views within a page.
[ Inbox content ]

Features

  • Tab items can be either buttons or links.
  • Allows showing a count next to tab items.
  • Can be controlled or uncontrolled.

Examples

With disabled tab

Making a tab disabled can be a useful design approach in situations where certain tabs should not be accessible or selectable by the user. Reasons for making a tab disabled include incomplete content, user permissions, contextual relevance, and user flow guidance.

Show code
<Tabs defaultValue="tab1">
    <Tabs.TriggerList aria-label="tabs example">
        <Tabs.Trigger value="tab1">
            <Tabs.TriggerText text="Inbox" />
        </Tabs.Trigger>
        <Tabs.Trigger value="tab2" disabled>
            <Tabs.TriggerText text="Scheduled" />
        </Tabs.Trigger>
        <Tabs.Trigger value="tab3">
            <Tabs.TriggerText text="Paid" />
        </Tabs.Trigger>
    </Tabs.TriggerList>
    <Tabs.Content value="tab1">Inbox Content</Tabs.Content>
    <Tabs.Content value="tab2">Scheduled Content</Tabs.Content>
    <Tabs.Content value="tab3">Paid Content</Tabs.Content>
</Tabs>

With tab links

By default, tab triggers will be button elements. But links can also be used by nesting nesting a link element within the trigger as passing an asChild prop to the trigger itself. Whether or not you should use links or buttons depends on the task at hand.

Show code
<Tabs defaultValue="tab1" activationMode="manual">
    <Tabs.TriggerList>
        <Tabs.Trigger value="tab1" asChild>
            <Link href="#with-tab-links">
                <Tabs.TriggerText text="Inbox" />
            </Link>
        </Tabs.Trigger>
        <Tabs.Trigger value="tab2" asChild>
            <Link href="#with-tab-links">
                <Tabs.TriggerText text="Scheduled" />
            </Link>
        </Tabs.Trigger>
        <Tabs.Trigger value="tab3" asChild>
            <Link href="#with-tab-links">
                <Tabs.TriggerText text="Paid" />
            </Link>
        </Tabs.Trigger>
    </Tabs.TriggerList>
    <Tabs.Content value="tab1">Inbox Content</Tabs.Content>
    <Tabs.Content value="tab2">Scheduled Content</Tabs.Content>
    <Tabs.Content value="tab3">Paid Content</Tabs.Content>
</Tabs>

With tab counters

A count can be shown next to the text of a tab to provide users with additional information about the contents of the tab. Showing a count can also add visual interest and help users differentiate between tabs more easily.

Show code
<Tabs defaultValue="tab1">
    <Tabs.TriggerList>
        <Tabs.Trigger value="tab1">
            <Tabs.TriggerText text="Inbox" />
            <Tabs.TriggerCounter counter={3} />
        </Tabs.Trigger>
        <Tabs.Trigger value="tab2">
            <Tabs.TriggerText text="Scheduled" />
            <Tabs.TriggerCounter counter={999} />
        </Tabs.Trigger>
        <Tabs.Trigger value="tab3">
            <Tabs.TriggerText text="Paid" />
        </Tabs.Trigger>
    </Tabs.TriggerList>
    <Tabs.Content value="tab1">Inbox Content</Tabs.Content>
    <Tabs.Content value="tab2">Scheduled Content</Tabs.Content>
    <Tabs.Content value="tab3">Paid Content</Tabs.Content>
</Tabs>

Accessibility

Adheres to the Tabs WAI-ARIA design pattern. See Radix documentation for details.

Related components

  • Filter menu: A component used to apply category-specific filters for a dataset.
  • Radio group: A form element that enables users to select a single value from a list of options.
  • Segmented control: A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views.
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page