## Primary badges (primary)

The Badge component supports primary mode via the `primary` property. In this mode, badges have the most prominent visual style with bright brand colors:

- **High contrast** - uses primary brand colors for maximum visibility
- **Bold appearance** - draws attention to important information
- **Enhanced visibility** - designed to stand out against various backgrounds
- **Accessibility support** - strong contrast ratios for readability

Primary mode is especially useful for creating critical notification indicators, active statuses, and high-priority markers that require immediate user attention in the interface.

```html
<Badge primary overlap="static">5</Badge>
<Badge primary overlap="static" icon="warning">Important</Badge>
<Badge primary dot overlap="static"/>
```
