Chip

@coinbase/cds-web@9.17.0

A compact content element for tags, filters, and selections.

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

󰒨

Source

󰏖

Storybook

󰏖

View as Markdown

---

Related components

• InputChip,
• MediaChip,
• SelectChip,
• TabbedChips

Basics

Render a Chip with text. Without onClick, it displays as a static pill. With onClick, it becomes a button. Use disabled to prevent interaction on an otherwise interactive chip.

Loading...

󰙡

Live Code

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

Icons and Images

Loading...

󰙡

Live Code

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

Styling

Active Color

Use active for high-contrast emphasis. When active is true, the Chip inverts the color scheme for everything inside its borders — background, color, icons, and other token-based colors are all resolved against the opposite light/dark palette. Set background and color to control the inactive appearance; those same tokens flip automatically when active.

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2} flexWrap="wrap">
      <Chip>Default</Chip>
      <Chip active>Active</Chip>
      <Chip active background="bgPrimary" color="fgInverse">
        Custom tokens
      </Chip>
    </HStack>
  );
}

To break from the inverted convention, set activeBackground and/or activeColor while active is true. The Chip paints those tokens directly instead of inverting. Any start, end, or children ReactNodes need explicit color props — they are not updated automatically.

Loading...

󰙡

Live Code

function Example() {
  return (
    <Chip
      active
      activeBackground="bgPositive"
      activeColor="fgInverse"
      end={<Icon color="fgInverse" name="caretDown" size="s" />}
    >
      Positive active
    </Chip>
  );
}

Sizes

size accepts xs and s. Defaults to s.

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2} flexWrap="wrap">
      <Chip size="s">size="s" (default)</Chip>
      <Chip size="xs">size="xs"</Chip>
    </HStack>
  );
}

Accessibility

When using onClick, provide an accessibilityLabel for screen readers, especially when the label text alone is ambiguous or when the chip has non-text content.

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2} flexWrap="wrap">
      <Chip
        accessibilityLabel="Select Bitcoin"
        onClick={() => alert('BTC')}
        start={<RemoteImage source={assets.btc.imageUrl} width={24} height={24} shape="circle" />}
      >
        BTC
      </Chip>
      <Chip
        accessibilityLabel="Filter by category"
        end={<Icon name="caretDown" />}
        onClick={() => alert('Filter')}
      >
        Category
      </Chip>
    </HStack>
  );
}