@wix/design-system/dist/docs/components/CounterBadgeExamples.md

@wix/design-system

## Feature Examples


### Skins
- description: <p>Background color can be one of the following: `general`, `danger`, `urgent`, `standard`, `warning`, `warningLight`, `success`, `light`, `neutralStandard` and `neutralLight`.</p>
- example: 
```jsx 
() => {
  return (
    <Layout cols={8}>
      <Cell span={1}>
        <CounterBadge skin="general">1</CounterBadge>
      </Cell>
      <Cell span={3}>general</Cell>
      <Cell span={1}>
        <CounterBadge skin="standard">1</CounterBadge>
      </Cell>
      <Cell span={3}>standard</Cell>
      <Cell span={1}>
        <CounterBadge skin="neutralStandard">1</CounterBadge>
      </Cell>
      <Cell span={3}>neutralStandard</Cell>
      <Cell span={1}>
        <CounterBadge skin="danger">1</CounterBadge>
      </Cell>
      <Cell span={3}>danger</Cell>
      <Cell span={1}>
        <CounterBadge skin="warning">1</CounterBadge>
      </Cell>
      <Cell span={3}>warning</Cell>
      <Cell span={1}>
        <CounterBadge skin="warningLight">1</CounterBadge>
      </Cell>
      <Cell span={3}>warning light</Cell>
      <Cell span={1}>
        <CounterBadge skin="urgent">1</CounterBadge>
      </Cell>
      <Cell span={3}>urgent</Cell>
      <Cell span={1}>
        <CounterBadge skin="success">1</CounterBadge>
      </Cell>
      <Cell span={3}>success</Cell>
      <Cell span={1}>
        <CounterBadge skin="light">1</CounterBadge>
      </Cell>
      <Cell span={3}>light</Cell>
      <Cell span={1}>
        <CounterBadge skin="neutralLight">1</CounterBadge>
      </Cell>
      <Cell span={3}>neutralLight</Cell>
    </Layout>
  );
};
```

### Shadow
- description: <p>CounterBadge can add a shadow using `showShadow` prop</p>
- example: 
```jsx 
() => {
  return (
    <Layout cols={4}>
      <Cell span={1}>
        <CounterBadge skin="general" showShadow>1</CounterBadge>
      </Cell>
      <Cell span={1}>
        <CounterBadge skin="standard" showShadow>1</CounterBadge>
      </Cell>
      <Cell span={1}>
        <CounterBadge skin="neutralStandard" showShadow>1</CounterBadge>
      </Cell>
      <Cell span={1}>
        <CounterBadge skin="danger" showShadow>1</CounterBadge>
      </Cell>
      <Cell span={1}>
        <CounterBadge skin="warning" showShadow>1</CounterBadge>
      </Cell> 
      <Cell span={1}>
        <CounterBadge skin="warningLight" showShadow>1</CounterBadge>
      </Cell> 
      <Cell span={1}>
        <CounterBadge skin="urgent" showShadow>1</CounterBadge>
      </Cell>
      <Cell span={1}>
        <CounterBadge skin="success" showShadow>1</CounterBadge>
      </Cell>
      <Cell span={1}>
        <CounterBadge skin="light" showShadow>1</CounterBadge>
      </Cell>
      <Cell span={1}>
        <CounterBadge skin="neutralLight" showShadow>1</CounterBadge>
      </Cell>
    </Layout>
  );
};
```

### Custom node
- description: <p>CounterBadge can display a custom node, like an icon.</p>
- example: 
```jsx 
() => {
  return (
    <Layout cols={4}>
      <Cell span={1}>
        <CounterBadge><Icons.Check/></CounterBadge>
      </Cell>
      <Cell span={1}>
        <CounterBadge><Icons.More/></CounterBadge>
      </Cell>
      <Cell span={1}>
        <CounterBadge skin="danger"><Icons.HeartFilled/></CounterBadge>
      </Cell>
      <Cell span={1}>
        <CounterBadge skin="success">New!</CounterBadge>
      </Cell>
    </Layout>
  );
};
```

### Advanced
- description: <p>An example for a CounterBadge counting items in cart.</p>
- example: 
```jsx 
() => {
  return (
    <Layout cols={3}>
      <Cell span={1}>
        <span style={{position: 'relative'}}>
          <IconButton>
            <Icons.Cart/>
          </IconButton>
          <div style={{position: 'absolute', top: '-20px', left: '25px', pointerEvents: 'none'}}>
            <CounterBadge>0</CounterBadge>
          </div>
        </span>
      </Cell>
      <Cell span={1}>
        <span style={{position: 'relative'}}>
          <IconButton>
            <Icons.Cart/>
          </IconButton>
          <div style={{position: 'absolute', top: '-20px', left: '25px', pointerEvents: 'none'}}>
            <CounterBadge>21</CounterBadge>
          </div>
        </span>
      </Cell>
      <Cell span={1}>
        <span style={{position: 'relative'}}>
          <IconButton>
            <Icons.Cart/>
          </IconButton>
          <div style={{position: 'absolute', top: '-20px', left: '25px', pointerEvents: 'none'}}>
            <CounterBadge>555</CounterBadge>
          </div>
        </span>
      </Cell>
    </Layout>
  );
};
```