> ## Documentation Index
> Fetch the complete documentation index at: https://docs.heychocolate.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Carbon Badge

> Embeddable sustainability score badge for product pages and marketing.

The Carbon Badge is a Web Component that displays a product's sustainability score in a compact, visually appealing format.

## Quick start

```html theme={null}
<script src="https://cdn.heychocolate.com/widgets/v1/carbon-badge.js"></script>

<hc-carbon-badge
  product-id="prod_abc123"
  api-key="sk_live_your_key"
  variant="detailed"
  theme="light"
></hc-carbon-badge>
```

## Variants

### Compact

Minimal badge showing only the score:

```html theme={null}
<hc-carbon-badge product-id="prod_abc123" variant="compact"></hc-carbon-badge>
```

### Detailed

Full badge with score, equivalency, and lifecycle breakdown:

```html theme={null}
<hc-carbon-badge product-id="prod_abc123" variant="detailed"></hc-carbon-badge>
```

### Inline

Inline text format for embedding in paragraphs:

```html theme={null}
<hc-carbon-badge product-id="prod_abc123" variant="inline"></hc-carbon-badge>
```

## Attributes

| Attribute          | Type    | Required | Description                                          |
| ------------------ | ------- | -------- | ---------------------------------------------------- |
| `product-id`       | String  | Yes      | Hey Chocolate product ID                             |
| `api-key`          | String  | Yes      | API key (use read-only key)                          |
| `variant`          | String  | No       | `compact`, `detailed`, `inline` (default: `compact`) |
| `theme`            | String  | No       | `light`, `dark`, `auto` (default: `auto`)            |
| `locale`           | String  | No       | Language code (default: `en`)                        |
| `show-equivalency` | Boolean | No       | Show equivalency text (default: `true`)              |
| `show-breakdown`   | Boolean | No       | Show lifecycle breakdown (default: `false`)          |
| `animated`         | Boolean | No       | Enable animations (default: `true`)                  |

## Styling

Override default styles with CSS custom properties:

```css theme={null}
hc-carbon-badge {
  --hc-badge-bg: #ffffff;
  --hc-badge-text: #333333;
  --hc-badge-accent: #F83B00;
  --hc-badge-radius: 12px;
  --hc-badge-font: inherit;
}
```

## Events

Listen for badge interactions:

```javascript theme={null}
document.querySelector('hc-carbon-badge').addEventListener('hc:badge-click', (e) => {
  console.log('Badge clicked, product:', e.detail.productId);
});

document.querySelector('hc-carbon-badge').addEventListener('hc:badge-loaded', (e) => {
  console.log('Score loaded:', e.detail.co2Equivalent);
});
```

## Framework usage

### React

```tsx theme={null}
import '@heychocolate/widgets/carbon-badge';

<hc-carbon-badge product-id="prod_abc123" variant="detailed" />
```

### Vue/Nuxt

```vue theme={null}
<template>
  <hc-carbon-badge :product-id="productId" variant="detailed" />
</template>

<script setup>
import '@heychocolate/widgets/carbon-badge';
</script>
```