TabbedChips

@coinbase/cds-web@8.13.6

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.

Import

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

SourceView source codeStorybookView StorybookFigmaView Figma

---

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}>
        <TextTitle3 as="p">Popular assets</TextTitle3>
      </VStack>
      <SearchInput compact placeholder="Search by name" />
      <TabbedChips value={value} onChange={setValue} tabs={tabs} />
    </VStack>
  );
}