Skip to content
Telescope
Components

Tabs

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

Basic usage

First, import the component.

import {Tabs} from '@pleo-io/telescope'

Then use it, like so.

API reference

Tabs

Contains all the tabs component parts.

This component doesn't accept any custom props.

TriggerList

Contains the list of triggers.

This component doesn't accept any custom props.

Trigger

A button or link that activates its associated content.

This component doesn't accept any custom props.

TriggerText

A wrapper around the text of the trigger. Needed to prevent layout shift

PropTypeDefault
text*
string

TriggerCounter

A count shown next to the text of a tab.

PropTypeDefault
counter*
number

Content

Contains the content associated with each trigger.

This component doesn't accept any custom props.

Examples

Controlled

export const ControlledExample = () => {
    const [value, setValue] = React.useState('tab1')

    return (
        <Tabs value={value}>
            <Tabs.TriggerList>
                <Tabs.Trigger value="tab1" onClick={() => setValue('tab1')}>
                    <Tabs.TriggerText text="Inbox" />
                </Tabs.Trigger>
                <Tabs.Trigger value="tab2" onClick={() => setValue('tab2')}>
                    <Tabs.TriggerText text="Scheduled" />
                </Tabs.Trigger>
                <Tabs.Trigger value="tab3" onClick={() => setValue('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>
    )
}
On this page