Kbd
A key or a keyboard shortcut, such as ⌘K, set inline in text, in a tooltip or at the end of a menu item.
import { Kbd, KbdGroup } from "@plexui/vue/components/Kbd";Examples
Overview
Shortcut
Sizes and variants
In a tooltip and a menu
API
Kbd
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "sm" | Height and text size: 16px, 20px or 24px |
variant | "soft" | "outline" | "soft" | soft fills the key, outline draws its edge; both mix the text color |
class | string | — | Applied to the kbd element |
default slot | VNode[] | — | The key |
Other <kbd> attributes (title, aria-label, ...) fall through to it.
KbdGroup
A row of keys pressed together (React's Kbd.Group). Renders a <span>; attributes fall through to it.
Styling
Kbd reads these component tokens. Override them at any scope to restyle it:
--kbd-background: fill (defaults to the text color at 10%)--kbd-border-color: edge (transparent forsoft, the text color at 24% foroutline)--kbd-color: text color (defaults toinherit)--kbd-radius: corner radius (defaults to--radius-xs)