Chip

@coinbase/cds-web@8.38.5

A compact, interactive content element.

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

󰒨

Source

󰏖

Storybook

󰏖

View as Markdown

---

Related components

• InputChip,
• SelectChip

Basic usage

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2}>
      <Chip>Basic Chip</Chip>
      <Chip disabled>Disabled Chip</Chip>
      <Chip onClick={() => alert('Clicked!')}>Interactive Chip</Chip>
    </HStack>
  );
}

Variants

Loading...

󰙡

Live Code

function Example() {
  return (
    <VStack gap={2}>
      <HStack gap={2}>
        <Chip compact>Compact</Chip>
        <Chip inverted>Inverted</Chip>
        <Chip maxWidth={100} numberOfLines={1}>
          Long text that should truncate nicely
        </Chip>
      </HStack>
    </VStack>
  );
}

With Icons and Images

Loading...

󰙡

Live Code

function Example() {
  return (
    <VStack gap={2}>
      <HStack gap={2}>
        <Chip start={<Icon name="star" />}>With Start Icon</Chip>
        <Chip end={<Icon name="chevronDown" />}>With End Icon</Chip>
        <Chip start={<Icon name="star" />} end={<Icon name="chevronDown" />}>
          Both Icons
        </Chip>
      </HStack>
      <HStack gap={2}>
        <Chip
          start={<RemoteImage source={assets.btc.imageUrl} width={16} height={16} />}
          onClick={() => alert('BTC selected')}
        >
          BTC
        </Chip>
        <Chip
          start={<RemoteImage source={assets.eth.imageUrl} width={16} height={16} />}
          onClick={() => alert('ETH selected')}
        >
          ETH
        </Chip>
      </HStack>
    </VStack>
  );
}