# <aihio-badge>

A small non-interactive label for a status, count, or category, such as Live, Beta, or 3 new.

Intents: `status`, `labeling`, `metadata`.

## Attributes

- `variant` (`default` | `secondary` | `outline` | `success` | `warning` | `destructive`): Visual style variant. Default: `default`.

## Slots

- `default`: Badge text content.

## Accessibility obligations

- (warn) When badge conveys information not present elsewhere (e.g. unread count): Include the meaning in visible text or an aria-label on the surrounding context. Badges have no inherent role.

## Examples

### Default

```html
<aihio-badge>New</aihio-badge>
```

### Secondary

```html
<aihio-badge variant="secondary">Draft</aihio-badge>
```

### Outline

```html
<aihio-badge variant="outline">v2.0</aihio-badge>
```

### Destructive

```html
<aihio-badge variant="destructive">Error</aihio-badge>
```

## Mistakes

### Badges are non-interactive labels. Put interactive elements outside the badge.

Don't (aihio lint: forbidden-descendant):

```html
<aihio-badge><aihio-button>Delete</aihio-button></aihio-badge>
```

Do:

```html
<aihio-cluster gap="tight">
  <aihio-badge>Draft</aihio-badge>
  <aihio-button variant="ghost" size="sm">Delete</aihio-button>
</aihio-cluster>
```

### variant="primary" is not valid. Use variant="default" for the primary style.

Don't (aihio lint: invalid-enum-attribute):

```html
<aihio-badge variant="primary">New</aihio-badge>
```

Do:

```html
<aihio-badge variant="default">New</aihio-badge>
```