Kbd

Keyboard key and shortcut hint using the public DuskMoon Core 1.19.9 CSS contract.

Installation

npm install @duskmoon-dev/el-kbd

import '@duskmoon-dev/el-kbd/register';

Live Demo

Press <el-dm-kbd size="sm">Ctrl</el-dm-kbd> + <el-dm-kbd size="sm">K</el-dm-kbd>

Properties

| Property | Type | Default | Description | | –––– | ———–– | —–– | —————–– | —– | —— | –––– | | size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Key size | | color | theme color | — | Key color | | ghost | boolean | false | Hide the key border |

Composition and accessibility

Use this presentational element for keyboard input hints. It renders a native <kbd> inside its shadow root.