Kbd

The built-in kbd tag — a keyboard key for documenting shortcuts. Usage, options, and live examples.

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

Sizes

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

The text shorthand

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

With other components

Keys read naturally inside running {% text %}, where they document a shortcut mid-sentence:

Attributes

Omit any attribute to take its default.

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):

/* 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: