## Feature Examples


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

### Skin
- description: <p>Control the skin of a component with <code>skin</code> prop. Is support 10 skins:</p><p></p><li><code>general</code> - use it as the default emphasis</li><li><code>danger</code> - use it to highlight a destructive or critical value</li><li><code>urgent</code> - use it to draw immediate attention to a value</li><li><code>standard</code> - use it as the primary branded emphasis</li><li><code>warning</code> - use it to highlight a value that can have an unexpected impact</li><li><code>warningLight</code> - use it when warning needs reduced emphasis</li><li><code>success</code> - use it to highlight confirmed or completed values</li><li><code>light</code> - use it on dark backgrounds</li><li><code>neutralStandard</code> - use it when the counter needs neutral emphasis</li><li><code>neutralLight</code> - use it when the counter needs minimal emphasis on light backgrounds</li>
- 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: <p>Use the <code>showShadow</code> prop to add a drop shadow to the counter badge.</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>A counter badge can also display a custom node as its content, like an icon or a short text label, instead of a number.</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>
  );
};
```




    


## Common Use Case Examples


### Counting items in a cart
- description: <p>Attach a counter badge to an icon button to show the number of items in a cart, updating as items are added or removed.</p>
- 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: <p>Use a counter badge to show the number of items in each category, making it easy to identify where attention is needed most.</p>
- 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(id)}
        />
        <Box padding="0 0 20px" />
      </Card>
    </Box>
  );
};
```

### New feature or item
- description: <p>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.</p>
- 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>
          <Box
            direction="vertical"
            gap="2px"
            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',
            }}
          >
            <Text size="small">Email campaigns</Text>
            <Text size="tiny" secondary>
              Send newsletters to your contacts
            </Text>
          </Box>
        </Card.Content>
        <Card.Divider />
        <Card.Content>
          <Box
            direction="vertical"
            gap="2px"
            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 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>
        </Card.Content>
        <Card.Divider />
      </Card>
    </Box>
  );
};
```