Keyboard Key

A Keyboard Key renders a key or a shortcut the way a keyboard shows it, so instructions can name a key without quoting it as prose. It is the small styled block you see in a shortcut list, a tooltip or an empty state that suggests a command.

Demo

Rendered live, with the same build of the library you install.

⌘Kopens the search, andEsccloses it.

Usage

Source
KeyboardKey.tsx
import { NKbd } from '@nayan-ui/react';


const KeyboardKey = () => {
  return (
    <div>
      <div className="flex flex-wrap items-center gap-2 text-sm text-muted">
        <NKbd>⌘</NKbd>
        <NKbd>K</NKbd>
        <span>opens the search, and</span>
        <NKbd>Esc</NKbd>
        <span>closes it.</span>
      </div>
    </div>
  );
};


export default KeyboardKey;

Attributes

2 props
NameTypeDefaultDetails
childrenReactNodeRequiredThe children prop.
classNamestring''The className prop.

Tags

Other components solving nearby problems.