# Badge & Kbd

`:badge` adds a colored inline label, `:kbd` a keyboard key. Both are text directives: they sit
inside a sentence.

## Live demo

<StoryEmbed slug="badge-and-kbd" />

## Syntax

```md title="Markdown"
:badge[v0.1]{type=primary} :badge[Stable]{type=success}

Press :kbd[T] to switch theme.
```

```mdx title="MDX"
<Badge type="success">Stable</Badge> <Kbd>Ctrl</Kbd>
```

## Attributes and props

| Attribute      | Type                                                 | Default   | Description |
| -------------- | ---------------------------------------------------- | --------- | ----------- |
| `type` (Badge) | `default \| primary \| success \| warning \| danger` | `default` | Color       |

`Kbd` takes no attribute: its content is the key label.

## In other formats

<FormatSupport />