TabLabel

@coinbase/cds-web@8.34.1

A text label component used within tab navigation.

Import

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

SourceView source codeStorybookView Storybook

---

Related components

• TabNavigation,
• TabIndicator

---

󰏖

View as Markdown

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>