# Badge

## Visual Structure

```
ga-badge [--text|--dot] [--default|--default-inverted|--information|--error|--warning|--success|--muted|--disabled]
```

## Elements Hierarchy

### Core Block

- `ga-badge` - Main container for the badge component that displays status indicators or counts

### Display Variants

- `ga-badge--text` - Text badge variant
- `ga-badge--dot` - Dot badge variant

### Status Modifiers

- `ga-badge--default` - Default style with action surface color
- `ga-badge--default-inverted` - Inverted default style
- `ga-badge--muted` - Muted style
- `ga-badge--information` - Information style
- `ga-badge--error` - Error style
- `ga-badge--warning` - Warning style
- `ga-badge--success` - Success style
- `ga-badge--disabled` - Disabled style
- `ga-badge--disabled-inverted` - Disabled inverted style

## Examples

### Text

```html
<span class="ga-badge ga-badge--text ga-badge--default">25</span>
<span class="ga-badge ga-badge--text ga-badge--default-inverted">99</span>
<span class="ga-badge ga-badge--text ga-badge--muted">9</span>
<span class="ga-badge ga-badge--text ga-badge--information">7</span>
<span class="ga-badge ga-badge--text ga-badge--error">-237%</span>
<span class="ga-badge ga-badge--text ga-badge--warning">9</span>
<span class="ga-badge ga-badge--text ga-badge--success">+25K</span>
<span class="ga-badge ga-badge--text ga-badge--disabled">0</span>
<span class="ga-badge ga-badge--text ga-badge--disabled-inverted">0</span>
```

### Dot

```html
<span class="ga-badge ga-badge--dot ga-badge--default"></span>
<span class="ga-badge ga-badge--dot ga-badge--default-inverted"></span>
<span class="ga-badge ga-badge--dot ga-badge--muted"></span>
<span class="ga-badge ga-badge--dot ga-badge--information"></span>
<span class="ga-badge ga-badge--dot ga-badge--error"></span>
<span class="ga-badge ga-badge--dot ga-badge--warning"></span>
<span class="ga-badge ga-badge--dot ga-badge--success"></span>
<span class="ga-badge ga-badge--dot ga-badge--disabled"></span>
<span class="ga-badge ga-badge--dot ga-badge--disabled-inverted"></span>
```