## Feature Examples

### Size
- description: Adjust the component size using the `size` prop. It supports 2 sizes: - `medium` - `small`
- example:
```jsx
() => (
  <Box direction="vertical" gap="12px">
    <CounterBadge size="medium">8</CounterBadge>
    <CounterBadge size="small">8</CounterBadge>
  </Box>
);
```

### Skin
- description: Control the skin of a component with `skin` prop. Is support 10 skins: - `general` - use it as the default emphasis - `danger` - use it to highlight a destructive or critical value - `urgent` - use it to draw immediate attention to a value - `standard` - use it as the primary branded emphasis - `warning` - use it to highlight a value that can have an unexpected impact - `warningLight` - use it when warning needs reduced emphasis - `success` - use it to highlight confirmed or completed values - `light` - use it on dark backgrounds - `neutralStandard` - use it when the counter needs neutral emphasis - `neutralLight` - use it when the counter needs minimal emphasis on light backgrounds
- example:
```jsx
() => (
  <Box direction="vertical" gap="18px">
    <Box gap="12px" verticalAlign="middle">
      <CounterBadge skin="general">1</CounterBadge>
      <Text size="small">General</Text>
    </Box>
    <Box gap="12px" verticalAlign="middle">
      <CounterBadge skin="danger">1</CounterBadge>
      <Text size="small">Danger</Text>
    </Box>
    <Box gap="12px" verticalAlign="middle">
      <CounterBadge skin="urgent">1</CounterBadge>
      <Text size="small">Urgent</Text>
    </Box>
    <Box gap="12px" verticalAlign="middle">
      <CounterBadge skin="standard">1</CounterBadge>
      <Text size="small">Standard</Text>
    </Box>
    <Box gap="24px" verticalAlign="middle">
      <Box gap="12px" verticalAlign="middle">
        <CounterBadge skin="warning">1</CounterBadge>
        <Text size="small">Warning</Text>
      </Box>
      <Box gap="12px" verticalAlign="middle">
        <CounterBadge skin="warningLight">1</CounterBadge>
        <Text size="small">Warning light</Text>
      </Box>
    </Box>
    <Box gap="12px" verticalAlign="middle">
      <CounterBadge skin="success">1</CounterBadge>
      <Text size="small">Success</Text>
    </Box>
    <Box gap="12px" verticalAlign="middle">
      <CounterBadge skin="light">1</CounterBadge>
      <Text size="small">Light</Text>
    </Box>
    <Box gap="24px" verticalAlign="middle">
      <Box gap="12px" verticalAlign="middle">
        <CounterBadge skin="neutralStandard">1</CounterBadge>
        <Text size="small">Neutral standard</Text>
      </Box>
      <Box gap="12px" verticalAlign="middle">
        <CounterBadge skin="neutralLight">1</CounterBadge>
        <Text size="small">Neutral light</Text>
      </Box>
    </Box>
  </Box>
);
```

### Shadow
- description: Use the `showShadow` prop to add a drop shadow to the counter badge.
- 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: A counter badge can also display a custom node as its content, like an icon or a short text label, instead of a number.
- 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>
  );
};
```

## Common Use Case Examples

### Counting items in a cart
- description: Attach a counter badge to an icon button to show the number of items in a cart, updating as items are added or removed.
- example:
```jsx
() => (
  <Box>
    <Card>
      <Box padding="30px 40px 30px" gap="24px">
        <span style={{ position: 'relative', display: 'inline-block' }}>
          <IconButton>
            <Icons.Cart />
          </IconButton>
          <div
            style={{
              position: 'absolute',
              top: '-10px',
              left: '25px',
              pointerEvents: 'none',
            }}
          >
            <CounterBadge>0</CounterBadge>
          </div>
        </span>
        <span style={{ position: 'relative', display: 'inline-block' }}>
          <IconButton>
            <Icons.Cart />
          </IconButton>
          <div
            style={{
              position: 'absolute',
              top: '-10px',
              left: '25px',
              pointerEvents: 'none',
            }}
          >
            <CounterBadge>21</CounterBadge>
          </div>
        </span>
        <span style={{ position: 'relative', display: 'inline-block' }}>
          <IconButton>
            <Icons.Cart />
          </IconButton>
          <div
            style={{
              position: 'absolute',
              top: '-10px',
              left: '25px',
              pointerEvents: 'none',
            }}
          >
            <CounterBadge>555</CounterBadge>
          </div>
        </span>
      </Box>
    </Card>
  </Box>
);
```

### Prioritizing by urgency
- description: Use a counter badge to show the number of items in each category, making it easy to identify where attention is needed most.
- example:
```jsx
() => {
  const [activeTab, setActiveTab] = React.useState(0);

  const tabs = [
    { id: 0, title: 'All orders' },
    {
      id: 1,
      title: (
        <Box gap="6px" verticalAlign="middle">
          <Text size="small">Pending</Text>
          <CounterBadge skin="warning" size="tiny">
            5
          </CounterBadge>
        </Box>
      ),
    },
    {
      id: 2,
      title: (
        <Box gap="6px" verticalAlign="middle">
          <Text size="small">Cancelled</Text>
          <CounterBadge skin="danger" size="tiny">
            3
          </CounterBadge>
        </Box>
      ),
    },
    {
      id: 3,
      title: (
        <Box gap="6px" verticalAlign="middle">
          <Text size="small">Completed</Text>
          <CounterBadge skin="success" size="tiny">
            24
          </CounterBadge>
        </Box>
      ),
    },
  ];

  return (
    <Box width="560px">
      <Card>
        <Card.Header
          title="Orders"
          subtitle="Manage and track your store orders"
        />
        <Card.Divider />
        <Tabs
          items={tabs}
          activeId={activeTab}
          onClick={({ id }) => setActiveTab(Number(id))}
        />
        <Box padding="0 0 20px" />
      </Card>
    </Box>
  );
};
```

### New feature or item
- description: By displaying a custom node inside a counter badge, you can highlight non-numeric information — like a "New!" label to draw attention to a recently added feature or item.
- example:
```jsx
() => {
  const [hoveredId, setHoveredId] = React.useState(null);

  return (
    <Box width="460px">
      <Card>
        <Card.Header
          title="Tools"
          subtitle="Everything you need to grow your business"
        />
        <Card.Divider />
        <Card.Content>
          <div
            onMouseEnter={() => setHoveredId('1')}
            onMouseLeave={() => setHoveredId(null)}
            style={{
              cursor: 'pointer',
              margin: '-24px',
              padding: '24px',
              backgroundColor:
                hoveredId === '1' ? 'var(--wsr-color-D70)' : 'transparent',
              transition: 'background-color 0.1s ease',
            }}
          >
            <Box direction="vertical" gap="2px">
              <Text size="small">Email campaigns</Text>
              <Text size="tiny" secondary>
                Send newsletters to your contacts
              </Text>
            </Box>
          </div>
        </Card.Content>
        <Card.Divider />
        <Card.Content>
          <div
            onMouseEnter={() => setHoveredId('2')}
            onMouseLeave={() => setHoveredId(null)}
            style={{
              cursor: 'pointer',
              margin: '-24px',
              padding: '24px',
              backgroundColor:
                hoveredId === '2' ? 'var(--wsr-color-D70)' : 'transparent',
              transition: 'background-color 0.1s ease',
            }}
          >
            <Box direction="vertical" gap="2px">
              <Box gap="8px" verticalAlign="middle">
                <Text size="small">AI content writer</Text>
                <CounterBadge skin="success">New!</CounterBadge>
              </Box>
              <Text size="tiny" secondary>
                Generate copy for your site instantly
              </Text>
            </Box>
          </div>
        </Card.Content>
        <Card.Divider />
      </Card>
    </Box>
  );
};
```