# DotSymbol

**📖 Live documentation:** https://cds.coinbase.com/components/other/DotSymbol/

Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.

## Import

```tsx
import { DotSymbol } from '@coinbase/cds-web/dots/DotSymbol'
```

## Examples

### Placements

```jsx live
function Placements() {
  const PIN_DIRECTIONS = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
  return (
    <VStack gap={4}>
      {PIN_DIRECTIONS.map((pinDirection) => (
        <VStack gap={4} padding={1} key={`dotsymbol-placement-${pinDirection}`} paddingBottom={4}>
          <DotSymbol size="m" pin={pinDirection} source={assets.btc.imageUrl}>
            <VStack bordered padding={1}>
              Child
            </VStack>
          </DotSymbol>
          <DotSymbol size="m" pin={pinDirection} source={assets.btc.imageUrl}>
            <Icon name="airdrop" shape="square" size="l" />
          </DotSymbol>
        </VStack>
      ))}
    </ResponsiveExample>
  );
}
```

### Sizes

```jsx live
function Sizes() {
  const SIZES = ['xs', 's', 'm', 'l'];
  return (
    <VStack gap={2}>
      {SIZES.map((size) => (
        <VStack gap={1} key={`dotsymbol-size-${size}`}>
          <DotSymbol source={assets.btc.imageUrl} size={size} />
        </VStack>
      ))}
    </ResponsiveExample>
  );
}
```

### Dotting relative to shape of child

You can use the overlap prop to place the dot relative to the corner of the wrapped element.

```jsx live
function DottingRelativeToShapeOfChild() {
  return (
    <VStack gap={2}>
      <HStack gap={2}>
        <DotSymbol source={assets.eth.imageUrl} overlap="circular" pin="bottom-end" size="m">
          <Avatar src={assets.btc.imageUrl} size="xxxl" />
        </DotSymbol>
        <DotSymbol source={assets.eth.imageUrl} overlap="circular" pin="bottom-end" size="l">
          <Avatar src={assets.btc.imageUrl} size="xxxl" />
        </DotSymbol>
      </HStack>
    </VStack>
  );
}
```

### Use DotSymbol paired with Icon

```jsx live
function UseDotSymbolPairedWithIcon() {
  return (
    <VStack gap={1}>
      <DotSymbol
        overlap="circular"
        active
        iconName="lightningBolt"
        pin="bottom-end"
        size={avatarIconSizeMap['xxxl']}
      >
        <Avatar source={assets.dai.imageUrl} size="xxxl" />
      </DotSymbol>
    </VStack>
  );
}
```

### Use DotSymbol paired with another Asset

```jsx live
function UseDotSymbolPairedWithAnotherAsset() {
  return (
    <VStack>
      <DotSymbol
        overlap="circular"
        pin="bottom-end"
        source={assets.polygon.imageUrl}
        size={avatarDotSizeMap['xxxl']}
      >
        <Avatar source={assets.dai.imageUrl} size="xxxl" />
      </DotSymbol>
    </ResponsiveExample>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `active` | `boolean` | No | `-` | Whether the icon is active |
| `background` | `ResponsiveProp<Color>` | No | `-` | - |
| `borderColor` | `ResponsiveProp<Color>` | No | `-` | - |
| `children` | `ReactNode` | No | `-` | The element that the dot will anchor to |
| `className` | `string` | No | `-` | - |
| `color` | `ResponsiveProp<Color>` | No | `-` | The color of the icon |
| `iconClassName` | `string` | No | `-` | - |
| `iconName` | `IconName` | No | `-` | Icon name to add to the dot. |
| `iconStyle` | `CSSProperties` | No | `-` | - |
| `imageClassName` | `string` | No | `-` | - |
| `imageStyle` | `CSSProperties` | No | `-` | - |
| `overlap` | `circular` | No | `-` | Indicates what shape dot is overlapping |
| `pin` | `PinPlacement` | No | `-` | Position of the dot |
| `size` | `IconSize` | No | `-` | Size of the dot |
| `source` | `string` | No | `-` | Image source path |
| `style` | `CSSProperties` | No | `-` | - |
| `symbol` | `ReactNode` | No | `-` | Add an arbitrary ReactNode to the dot instead of an icon. |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |