import CodeRender from '../../CodeRender'

### Default usage

<CodeRender code={`
<div class="badge">default</div>
<div class="badge badge-neutral">neutral</div>
<div class="badge badge-primary">primary</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-ghost">ghost</div>
`} />

```html
<div class="badge">default</div>
<div class="badge badge-neutral">neutral</div>
<div class="badge badge-primary">primary</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-ghost">ghost</div>
```

### Outline

<CodeRender code={`
<div class="badge badge-outline">default</div>
<div class="badge badge-neutral badge-outline">neutral</div>
<div class="badge badge-primary badge-outline">primary</div>
<div class="badge badge-success badge-outline">success</div>
<div class="badge badge-warning badge-outline">warning</div>
<div class="badge badge-error badge-outline">error</div>
`} />

```html
<div class="badge badge-outline">default</div>
<div class="badge badge-neutral badge-outline">neutral</div>
<div class="badge badge-primary badge-outline">primary</div>
<div class="badge badge-success badge-outline">success</div>
<div class="badge badge-warning badge-outline">warning</div>
<div class="badge badge-error badge-outline">error</div>
```

### Sizes

<CodeRender code={`
<div class="badge badge-lg">987,654</div>
<div class="badge badge-md">987,654</div>
<div class="badge badge-sm">987,654</div>
<div class="badge badge-xs">987,654</div>
`} />

```html
<div class="badge badge-lg">987,654</div>
<div class="badge badge-md">987,654</div>
<div class="badge badge-sm">987,654</div>
<div class="badge badge-xs">987,654</div>
```