# Kbd

Renders a `<kbd>` styled like a physical keyboard key — for documenting shortcuts such as
Ctrl, ⌘, or Enter. The key text is the block body, or a `text` attribute when you don't need
a body.

Use it as `{% kbd %}` in Markdown, or call it from Python logic (loops,
snippets) via `component('aardvark', 'kbd', …)`. Close the tag with
`{% endKbd %}`.

## Demonstrations

### A shortcut, inline

The block body is the key text. Drop keys inline in a sentence:

Press Ctrl + C to copy.

<br>

Source: Markdown

```aardvark
Press {% kbd %}Ctrl{% endKbd %} + {% kbd %}C{% endKbd %} to copy.
```


Source: Python

```python
ctrl = component('aardvark', 'kbd', children='Ctrl')
c = component('aardvark', 'kbd', children='C')
f"Press {ctrl} + {c} to copy."
```



### Sizes

`size` scales the key from `xs` to `xl` (`sm` is the default):

esc tab shift enter space

<br>

Source: Markdown

```aardvark
{% kbd size='xs' %}esc{% endKbd %}
{% kbd size='sm' %}tab{% endKbd %}
{% kbd size='md' %}shift{% endKbd %}
{% kbd size='lg' %}enter{% endKbd %}
{% kbd size='xl' %}space{% endKbd %}
```


Source: Python

```python
component('aardvark', 'kbd', size='xs', children='esc')
component('aardvark', 'kbd', size='sm', children='tab')
component('aardvark', 'kbd', size='md', children='shift')
component('aardvark', 'kbd', size='lg', children='enter')
component('aardvark', 'kbd', size='xl', children='space')
```



### The `text` shorthand

When you don't need a block body, set `text` instead — handy in a loop or a one-liner:

⌘ K

<br>

Source: Markdown

```aardvark
{% kbd text='⌘' %} {% kbd text='K' %}
```


Source: Python

```python
component('aardvark', 'kbd', text='⌘')
component('aardvark', 'kbd', text='K')
```



## With other components

Keys read naturally inside running [`{% text %}`](/components/typography/text/),
where they document a shortcut mid-sentence:

Open the command palette with ⌘ K.

<br>

Source: Markdown

```aardvark
{% text %}Open the command palette with {% kbd text='⌘' %} {% kbd text='K' %}.{% endText %}
```


Source: Python

```python
cmd = component('aardvark', 'kbd', text='⌘')
k = component('aardvark', 'kbd', text='K')
component('aardvark', 'text', children=f'Open the command palette with {cmd} {k}.')
```



## Attributes

Omit any attribute to take its default.

| Attribute | Valid values | Description |
| --- | --- | --- |
| `text` | string | The key text, when not using the block body. |
| `size` | `xs`, `sm` (default), `md`, `lg`, `xl` | Scales the key. |
| body | text | The key text (the rich form; takes precedence over `text`). |
## CSS Selectors

Target the rendered element through its island marker — `[data-aardvark-island="Kbd"]` — or through the Mantine Styles API classes (`.mantine-Kbd-root` and its inner parts):


```css
/* Every rendered Kbd carries this island marker */
[data-aardvark-island="Kbd"] { }

/* Mantine Styles API class on the root element */
.mantine-Kbd-root { }
```


## Injecting Attributes

`attr={…}` forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert:

Ctrl

<br>

Source: Markdown

```aardvark
{% kbd attr={'onclick': '''
const value = this.innerText;
console.log('attr demo value:', value);
alert(value);
'''} %}Ctrl{% endKbd %}
```


Source: Python

```python
component('aardvark', 'kbd', children='Ctrl', attr={'onclick': '''
const value = this.innerText;
console.log('attr demo value:', value);
alert(value);
'''})
```