# Badge Component

Badges are used to inform the user of the status of specific data.

| Class name | Type |  |
| --- | --- | --- |
| badge | Component | Container element |
| badge-outline | Style | outline style |
| badge-dash | Style | dash outline style |
| badge-soft | Style | soft style |
| badge-ghost | Style | ghost style |
| badge-neutral | Color | neutral color |
| badge-primary | Color | primary color |
| badge-secondary | Color | secondary color |
| badge-accent | Color | accent color |
| badge-info | Color | info color |
| badge-success | Color | success color |
| badge-warning | Color | warning color |
| badge-error | Color | error color |
| badge-xs | Size | extra small size |
| badge-sm | Size | small size |
| badge-md | Size | medium size (default) |
| badge-lg | Size | large size |
| badge-xl | Size | extra large size |

#### Badge

Badge

```
<span class="$$badge">Badge</span>
```

```
<span class="$$badge">Badge</span>
```

#### Badge sizes

```
<div class="$$badge $$badge-xs">Xsmall</div>
<div class="$$badge $$badge-sm">Small</div>
<div class="$$badge $$badge-md">Medium</div>
<div class="$$badge $$badge-lg">Large</div>
<div class="$$badge $$badge-xl">Xlarge</div>
```

```
<div class="$$badge $$badge-xs">Xsmall</div>
<div class="$$badge $$badge-sm">Small</div>
<div class="$$badge $$badge-md">Medium</div>
<div class="$$badge $$badge-lg">Large</div>
<div class="$$badge $$badge-xl">Xlarge</div>
```

#### Badge with colors

```
<div class="$$badge $$badge-primary">Primary</div>
<div class="$$badge $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-accent">Accent</div>
<div class="$$badge $$badge-neutral">Neutral</div>
<div class="$$badge $$badge-info">Info</div>
<div class="$$badge $$badge-success">Success</div>
<div class="$$badge $$badge-warning">Warning</div>
<div class="$$badge $$badge-error">Error</div>
```

```
<div class="$$badge $$badge-primary">Primary</div>
<div class="$$badge $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-accent">Accent</div>
<div class="$$badge $$badge-neutral">Neutral</div>
<div class="$$badge $$badge-info">Info</div>
<div class="$$badge $$badge-success">Success</div>
<div class="$$badge $$badge-warning">Warning</div>
<div class="$$badge $$badge-error">Error</div>
```

#### Badge with soft style

```
<div class="$$badge $$badge-soft $$badge-primary">Primary</div>
<div class="$$badge $$badge-soft $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-soft $$badge-accent">Accent</div>
<div class="$$badge $$badge-soft $$badge-info">Info</div>
<div class="$$badge $$badge-soft $$badge-success">Success</div>
<div class="$$badge $$badge-soft $$badge-warning">Warning</div>
<div class="$$badge $$badge-soft $$badge-error">Error</div>
```

```
<div class="$$badge $$badge-soft $$badge-primary">Primary</div>
<div class="$$badge $$badge-soft $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-soft $$badge-accent">Accent</div>
<div class="$$badge $$badge-soft $$badge-info">Info</div>
<div class="$$badge $$badge-soft $$badge-success">Success</div>
<div class="$$badge $$badge-soft $$badge-warning">Warning</div>
<div class="$$badge $$badge-soft $$badge-error">Error</div>
```

#### Badge with outline style

```
<div class="$$badge $$badge-outline $$badge-primary">Primary</div>
<div class="$$badge $$badge-outline $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-outline $$badge-accent">Accent</div>
<div class="$$badge $$badge-outline $$badge-info">Info</div>
<div class="$$badge $$badge-outline $$badge-success">Success</div>
<div class="$$badge $$badge-outline $$badge-warning">Warning</div>
<div class="$$badge $$badge-outline $$badge-error">Error</div>
```

```
<div class="$$badge $$badge-outline $$badge-primary">Primary</div>
<div class="$$badge $$badge-outline $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-outline $$badge-accent">Accent</div>
<div class="$$badge $$badge-outline $$badge-info">Info</div>
<div class="$$badge $$badge-outline $$badge-success">Success</div>
<div class="$$badge $$badge-outline $$badge-warning">Warning</div>
<div class="$$badge $$badge-outline $$badge-error">Error</div>
```

#### Badge with dash style

```
<div class="$$badge $$badge-dash $$badge-primary">Primary</div>
<div class="$$badge $$badge-dash $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-dash $$badge-accent">Accent</div>
<div class="$$badge $$badge-dash $$badge-info">Info</div>
<div class="$$badge $$badge-dash $$badge-success">Success</div>
<div class="$$badge $$badge-dash $$badge-warning">Warning</div>
<div class="$$badge $$badge-dash $$badge-error">Error</div>
```

```
<div class="$$badge $$badge-dash $$badge-primary">Primary</div>
<div class="$$badge $$badge-dash $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-dash $$badge-accent">Accent</div>
<div class="$$badge $$badge-dash $$badge-info">Info</div>
<div class="$$badge $$badge-dash $$badge-success">Success</div>
<div class="$$badge $$badge-dash $$badge-warning">Warning</div>
<div class="$$badge $$badge-dash $$badge-error">Error</div>
```

#### Badge with ghost style

```
<div class="$$badge $$badge-ghost $$badge-primary">Primary</div>
<div class="$$badge $$badge-ghost $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-ghost $$badge-accent">Accent</div>
<div class="$$badge $$badge-ghost $$badge-info">Info</div>
<div class="$$badge $$badge-ghost $$badge-success">Success</div>
<div class="$$badge $$badge-ghost $$badge-warning">Warning</div>
<div class="$$badge $$badge-ghost $$badge-error">Error</div>
```

```
<div class="$$badge $$badge-ghost $$badge-primary">Primary</div>
<div class="$$badge $$badge-ghost $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-ghost $$badge-accent">Accent</div>
<div class="$$badge $$badge-ghost $$badge-info">Info</div>
<div class="$$badge $$badge-ghost $$badge-success">Success</div>
<div class="$$badge $$badge-ghost $$badge-warning">Warning</div>
<div class="$$badge $$badge-ghost $$badge-error">Error</div>
```

![daisyUI store](https://img.daisyui.com/images/store/nexus.webp)

## NEXUS Official daisyUI Dashboard Template

## Available on daisyUI store

[More details](/store)