meowerse_
docs menu

Kbd

A keycap for keyboard shortcuts in text.

import { Kbd } from "@meowerse/ui"; · source packages/ui/src/components/Kbd.tsx

variants and states

Enter
one key
Shift + Enter
a combination

props

proptypedefaultrequired
childrenReactNode the key name, written as it appears on a keyboard.—yes

css custom properties

variabledarklight
--c-fg#ededeb#1a1a1c
--c-line-strong#404044#a9a8a2
--c-surface#151517#dfded9
--font-mono"JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospacesame
--fs-10.75remsame
--r-s2pxsame

Classes: .mw-kbd. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.

usage

one key

tsx
import { Kbd } from "@meowerse/ui";

<Kbd>Enter</Kbd>

html (needs @meowerse/ui/tokens.css)
<kbd class="mw-kbd">Enter</kbd>

a combination

tsx
import { Kbd } from "@meowerse/ui";

<>
  <Kbd>Shift</Kbd>
  {" + "}
  <Kbd>Enter</Kbd>
</>

html (needs @meowerse/ui/tokens.css)
<kbd class="mw-kbd">Shift</kbd> + <kbd class="mw-kbd">Enter</kbd>

accessibility

  • A native <kbd> element; screen readers read the key name.

do and don't

do

  • Write key names as they appear on keyboards.

don't

  • Don't use it for buttons on screen.