Skip to content

Kbd

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

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

Vue component: Kbd

SlotDefault classesDescription
root8 classesSingle keycap chip for shortcut hints; tooltip nesting adjusts contrast.

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

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2