---
url: "https://vueda.dev/v3/reference/theming/keys/Kbd.md"
title: "Kbd"
---

# Kbd

Source: `client/lib/theme/vueda-tailwind/display/index.js`

> Single keycap chip for shortcut hints; tooltip nesting adjusts contrast.

Vue component: [Kbd](/v3/reference/api/vue/Kbd.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/Kbd.md#theme-key-Kbd-root) | 8 classes | Single keycap chip for shortcut hints; tooltip nesting adjusts contrast. |

<a id="theme-key-Kbd-root"></a>

## root

> Single keycap chip for shortcut hints; tooltip nesting adjusts contrast.

Default classes:

```text
hairline hairline-border bg-muted text-muted-foreground
pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1
rounded-vueda-checkbox px-1 font-mono text-[length:var(--vueda-text-micro)] leading-[1.25] font-semibold select-none
[&_svg:not([class*='size-'])]:size-3
[[data-slot=tooltip-content]_&]:[--vueda-hairline-color:color-mix(in_oklab,var(--background)_20%,transparent)]
[[data-slot=tooltip-content]_&]:bg-background/20
[[data-slot=tooltip-content]_&]:text-background
dark:[[data-slot=tooltip-content]_&]:bg-background/10
```

Source: `client/lib/theme/vueda-tailwind/display/Kbd.theme.js:16`