## Secondary badges (secondary)

The Badge component supports secondary mode via the `secondary` property. In this mode, badges have a balanced visual style between primary and outline variants:

- **Moderate contrast** - balanced color treatment for noticeability without overwhelming
- **Softer appearance** - less intense than primary while maintaining clear visibility
- **Versatile styling** - works well in various interface contexts
- **Content harmony** - complements primary elements without visual competition

Secondary mode is especially useful for creating supporting information indicators, status updates, and categorical labels that are important but don't require critical attention in the visual hierarchy.

```html
<Badge secondary overlap="static">12</Badge>
<Badge secondary overlap="static" icon="info">Updated</Badge>
<Badge secondary dot overlap="static"/>
```
