TabbedChips

@coinbase/cds-web@8.38.5

Tab chips are to be used in a filter setting where the user is given the ability to refine the data source they are accessing.

󰣸

This component is deprecated. Please use the new TabbedChips alpha component instead.

import { TabbedChips } from '@coinbase/cds-web/chips/TabbedChips'

󰒨

Source

󰏖

Storybook

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Related components

• SelectChip

Basic Example

Loading...

󰙡

Live Code

function TabbedChipsExample() {
  const tabs = [
    {
      id: 'all_tab',
      label: 'All',
    },
    {
      id: 'swap_',
      label: 'Swap',
    },
    {
      id: 'collect_tab',
      label: 'Collect',
    },
    {
      id: 'bridge_tab',
      label: 'Bridge',
    },
  ];
  const [value, setValue] = useState(tabs[0].id);
  return (
    <VStack maxWidth={375} borderRadius={400} bordered paddingX={3} gap={2} paddingY={3}>
      <VStack paddingTop={1}>
        <Text as="p" font="title3">
          Popular assets
        </Text>
      </VStack>
      <SearchInput compact placeholder="Search by name" />
      <OldTabbedChips value={value} onChange={setValue} tabs={tabs} />
    </VStack>
  );
}