# syn-badge

## Summary

Badges are used to draw attention and display statuses or counts.

## Documentation

- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs)
- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=41137-656313)
- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=14127-697924)

## Class Information

- **Tag Name:** `syn-badge`
- **Import Example:** `import SynBadge from '@synergy-design-system/components/components/badge/badge.js';`

## Usage Information

- **Status:** stable
- **Since:** 1.14.0

## Available Slots

- `(default)`: The badge's content.

## Available Properties

### variant

attribute: `variant`
reflects: yes
type: `'primary' | 'success' | 'neutral' | 'warning' | 'danger'`
default: `'primary'`

The badge's theme variant.

## Available CSS Parts

- `base`: The component's base wrapper.
