<a id="badge"></a>

## Badge  
**Category**: Data Display
Small status indicators for UI elements
### Examples

#### Basic Badge  
```python
Span("Badge", cls="badge")
```

#### Empty State  
```python
Div(cls="badge badge-primary badge-lg")
Div(cls="badge badge-primary badge-md")
Div(cls="badge badge-primary badge-sm")
Div(cls="badge badge-primary badge-xs")
```

#### Outline Badges  
```python
Span("Primary", cls="badge badge-outline badge-primary")
Span("Secondary", cls="badge badge-outline badge-secondary")
Span("Accent", cls="badge badge-outline badge-accent")
Span("Neutral", cls="badge badge-outline badge-neutral")
Span("Info", cls="badge badge-outline badge-info")
Span("Success", cls="badge badge-outline badge-success")
Span("Warning", cls="badge badge-outline badge-warning")
Span("Error", cls="badge badge-outline badge-error")
```

#### Badge Sizes  
```python
Div("987,654", cls="badge badge-xl")        
Div("987,654", cls="badge badge-lg")
Div("987,654", cls="badge badge-md")
Div("987,654", cls="badge badge-sm")
Div("987,654", cls="badge badge-xs")
```

#### Brand Colors  
```python
Span("Primary", cls="badge badge-primary")
Span("Secondary", cls="badge badge-secondary")
Span("Accent", cls="badge badge-accent")
Span("Neutral", cls="badge badge-neutral")
Span("Info", cls="badge badge-info")
Span("Success", cls="badge badge-success")
Span("Warning", cls="badge badge-warning")
Span("Error", cls="badge badge-error")
```

#### Soft Badges  
```python
Span("Primary", cls="badge badge-soft badge-primary")
Span("Secondary", cls="badge badge-soft badge-secondary")
Span("Accent", cls="badge badge-soft badge-accent")
Span("Neutral", cls="badge badge-soft badge-neutral")
Span("Info", cls="badge badge-soft badge-info")
Span("Success", cls="badge badge-soft badge-success")
Span("Warning", cls="badge badge-soft badge-warning")
Span("Error", cls="badge badge-soft badge-error")
```

#### Dashed Badges  
```python
Span("Primary", cls="badge badge-dash badge-primary")
Span("Secondary", cls="badge badge-dash badge-secondary")
Span("Accent", cls="badge badge-dash badge-accent")
Span("Neutral", cls="badge badge-dash badge-neutral")
Span("Info", cls="badge badge-dash badge-info")
Span("Success", cls="badge badge-dash badge-success")
Span("Warning", cls="badge badge-dash badge-warning")
Span("Error", cls="badge badge-dash badge-error")
```

#### Ghost Badges  
```python
Span("Ghost", cls="badge badge-ghost")
```

#### Icon Badges  
```python
Span(Icon.info(cls="size-[1em]"), "Info", cls="badge badge-info"),
Span(Icon.success(cls="size-[1em]"), "Success", cls="badge badge-success"),
Span(Icon.warning(cls="size-[1em]"), "Warning", cls="badge badge-warning"),
Span(Icon.error(cls="size-[1em]"), "Error", cls="badge badge-error"),
```

#### Text Integration  
```python
H1('Heading 1', Span('New', cls='badge badge-accent badge-xl'), cls='text-xl font-semibold flex gap-1')
H2('Heading 2', Span('New', cls='badge badge-accent badge-lg'), cls='text-lg font-semibold flex gap-1')
H3('Heading 3', Span('New', cls='badge badge-accent badge-md'), cls='text-base font-semibold flex gap-1')
H4('Heading 4', Span('New', cls='badge badge-accent badge-sm'), cls='text-sm font-semibold flex gap-1')
H5('Heading 5', Span('New', cls='badge badge-accent badge-xs'), cls='text-xs font-semibold flex gap-1')
P('Paragraph', Span('New', cls='badge badge-accent badge-xs'), cls='text-xs flex gap-1')
```

#### Button Integration  
```python
Button('Inbox', Div('+99', cls='badge badge-sm'), cls='btn')
Button('Inbox', Div('+99', cls='badge badge-sm badge-secondary'), cls='btn')
```