MediaChip

@coinbase/cds-web@9.0.2

A chip with spacing optimized for displaying circular asset media and CTA accessories. Automatically adjusts padding based on content configuration.

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

󰒨

Source

󰏖

Storybook

󰏖

View as Markdown

---

Related components

• Chip,
• InputChip,
• SelectChip,
• TabbedChips

MediaChip automatically adjusts spacing based on the combination of start, children, and end content.

Basics

󰔂

Recommended component sizes for regular-sized chips

• Start: 24×24 circular media
• End: xs size icons

Loading...

󰙡

Live Code

<HStack gap={2} flexWrap="wrap">
  <MediaChip>Label only</MediaChip>
  <MediaChip
    start={<RemoteImage height={24} shape="circle" source={assets.eth.imageUrl} width={24} />}
  />
  <MediaChip
    start={<RemoteImage height={24} shape="circle" source={assets.eth.imageUrl} width={24} />}
  >
    Media + Label
  </MediaChip>
</HStack>

Layout Configurations

MediaChip supports all six content combinations automatically.

Loading...

󰙡

Live Code

<VStack gap={2}>
  <HStack flexWrap="wrap" gap={2}>
    <MediaChip>Label only</MediaChip>
    <MediaChip
      start={<RemoteImage height={24} shape="circle" source={assets.eth.imageUrl} width={24} />}
    />
    <MediaChip
      end={<Icon active color="fg" name="caretDown" size="xs" />}
      start={<RemoteImage height={24} shape="circle" source={assets.eth.imageUrl} width={24} />}
    />
  </HStack>
  <HStack flexWrap="wrap" gap={2}>
    <MediaChip
      start={<RemoteImage height={24} shape="circle" source={assets.eth.imageUrl} width={24} />}
    >
      Media + Label
    </MediaChip>
    <MediaChip end={<Icon active color="fg" name="filter" size="xs" />}>Label + Icon</MediaChip>
    <MediaChip
      end={<Icon active color="fg" name="caretDown" size="xs" />}
      start={<RemoteImage height={24} shape="circle" source={assets.eth.imageUrl} width={24} />}
    >
      All three
    </MediaChip>
  </HStack>
</VStack>

Styling

Compact

The compact variant reduces spacing for denser layouts.

󰔂

Recommended component sizes for compact chips

• Start: 16×16 circular media
• End: xs size icons

Loading...

󰙡

Live Code

<HStack flexWrap="wrap" gap={2}>
  <MediaChip compact>Label only</MediaChip>
  <MediaChip
    compact
    start={<RemoteImage height={16} shape="circle" source={assets.eth.imageUrl} width={16} />}
  />
  <MediaChip
    compact
    end={<Icon active color="fg" name="caretDown" size="xs" />}
    start={<RemoteImage height={16} shape="circle" source={assets.eth.imageUrl} width={16} />}
  >
    Compact
  </MediaChip>
</HStack>

Invert color scheme

Use invertColorScheme to emphasize the chip with inverted colors.

Loading...

󰙡

Live Code

<HStack gap={2} flexWrap="wrap">
  <MediaChip invertColorScheme>Selected</MediaChip>
  <MediaChip
    invertColorScheme
    end={<Icon active color="fg" name="check" size="xs" />}
    start={<RemoteImage height={24} shape="circle" source={assets.eth.imageUrl} width={24} />}
  >
    Active State
  </MediaChip>
</HStack>

Custom spacing

Override automatic spacing with custom values when needed.

Loading...

󰙡

Live Code

<HStack gap={2} flexWrap="wrap">
  <MediaChip paddingX={4} paddingY={2}>
    Custom spacing
  </MediaChip>
  <MediaChip
    paddingStart={3}
    paddingEnd={5}
    paddingY={1.5}
    start={<RemoteImage height={24} shape="circle" source={assets.eth.imageUrl} width={24} />}
  >
    Asymmetric padding
  </MediaChip>
</HStack>

Interactivity

Provide onClick to make MediaChip interactive. Use disabled to prevent interaction.

Loading...

󰙡

Live Code

<HStack gap={2} flexWrap="wrap">
  <MediaChip onClick={() => alert('Clicked!')}>Clickable</MediaChip>
  <MediaChip
    onClick={() => alert('Clicked!')}
    start={<RemoteImage height={24} shape="circle" source={assets.eth.imageUrl} width={24} />}
  >
    With Media
  </MediaChip>
  <MediaChip disabled onClick={() => alert('Should not fire')}>
    Disabled
  </MediaChip>
</HStack>

Accessibility

When onClick is provided and visible text is unclear (or absent), provide an accessibilityLabel.

Loading...

󰙡

Live Code

<HStack gap={2} flexWrap="wrap">
  <MediaChip
    accessibilityLabel="Open Ethereum details"
    onClick={() => alert('Open ETH')}
    start={<RemoteImage height={24} shape="circle" source={assets.eth.imageUrl} width={24} />}
  />
  <MediaChip
    accessibilityLabel="Open token filter"
    end={<Icon active color="fg" name="caretDown" size="xs" />}
    onClick={() => alert('Open filter')}
  >
    Filter
  </MediaChip>
</HStack>