TabLabel

@coinbase/cds-web@8.64.0

A text label component used within tab navigation.

󰣸

This component is deprecated along with the TabNavigation component. Please use the Tabs component and DefaultTab instead.

import { TabLabel } from '@coinbase/cds-web/tabs/TabLabel'

󰒨

Source

󰏖

Storybook

󰏖

View as Markdown

---

Peer dependencies

• framer-motion: ^10.18.0

---

Related components

• TabNavigation,
• TabIndicator

Basic Example

Loading...

󰙡

Live Code

<VStack gap={2}>
  <HStack gap={2}>
    <TabLabel>Primary tab</TabLabel>
    <TabLabel count={1}>Primary tab</TabLabel>
    <TabLabel count={10}>Primary tab</TabLabel>
    <TabLabel count={100}>Primary tab</TabLabel>
  </HStack>
  <HStack gap={2}>
    <TabLabel variant="secondary">Secondary tab</TabLabel>
    <TabLabel variant="secondary" count={1}>
      Secondary tab
    </TabLabel>
    <TabLabel variant="secondary" count={10}>
      Secondary tab
    </TabLabel>
    <TabLabel variant="secondary" count={100}>
      Secondary tab
    </TabLabel>
  </HStack>
</VStack>