Chip

@coinbase/cds-web@9.0.2

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

Color

Use invertColorScheme to invert foreground and background for emphasis.

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2} flexWrap="wrap">
      <Chip>Default</Chip>
      <Chip invertColorScheme>Inverted</Chip>
    </HStack>
  );
}

Compact

Use compact for smaller chips with reduced padding.

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2} flexWrap="wrap">
      <Chip>Default</Chip>
      <Chip compact>Compact</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>
  );
}