# Badge Component

Badges provide dynamic information, such as counts or status indications. They can contain labels or numbers.

## Usage {#usage}

Import the component:

```js
import 'mdui/components/badge.js';
```

Import the TypeScript type:

```ts
import type { Badge } from 'mdui/components/badge.js';
```

Example:

```html
<mdui-badge>12</mdui-badge>
```

## Examples {#examples}

### Variants {#example-variant}

The `variant` attribute controls the badge's shape. A `large` value creates a larger badge. Specify the content to display in the default slot.

```html
<mdui-badge variant="small"></mdui-badge>
<mdui-badge variant="large">99+</mdui-badge>
```

## mdui-badge API

### Properties

<table>
<thead>
  <tr>
    <th>Attribute</th>
    <th>Property</th>
    <th>Reflect</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>variant</td>
    <td>variant</td>
    <td>true</td>
    <td>&#39;small&#39; | &#39;large&#39;</td>
    <td>'large'</td>
    <td><p>Defines the badge size. Possible values:</p>
<ul>
<li><code>small</code>: A small badge without text.</li>
<li><code>large</code>: A large badge with text.</li>
</ul>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>(default)</td>
    <td><p>The text to be displayed.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Custom Properties

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>--shape-corner</td>
    <td><p>The corner radius of the component. You can use a specific pixel value, but it is recommended to reference <a href="/en/docs/2/styles/design-tokens#shape-corner">design tokens</a>.</p>
</td>
  </tr>
</tbody>
</table>