Keyboard key.

A shortcut, made visible.

In practice

Find your way ⌘K

Use for key names in shortcut instructions. This component does not register keyboard shortcuts.

Installation

Install Coal once. Components and TypeScript declarations are included. React 19 and React DOM 19 are peer dependencies.

Terminal · local package

npm install http://localhost:3100/downloads/chlohal-coal-ui-0.5.0.tgz

This installs the local package. It is not yet published on npm. See installation for stylesheet setup and integration.

Usage

example.tsx

"use client";
import * as React from "react";
import "@chlohal/coal-ui/styles.css";
import { Kbd } from "@chlohal/coal-ui";
export default function Example() {
    return (<div>
          Find your way <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </div>);
}

Source

The original Coal implementation. Use the package export to integrate it.

packages/react/src/kbd.tsx

import * as React from "react";
import { cn } from "./internal.js";
export type KbdProps = React.ComponentPropsWithRef<"kbd">;
export function Kbd({ className, ...props }: KbdProps) {
  return <kbd className={cn("coal-kbd", className)} {...props} />;
}

Accessibility checklist

Provide an accessible name for controls, including icon-only buttons.
Check keyboard navigation, visible focus and disabled states in your application.
Do not rely on color alone to communicate status.