Keyboard

The KBD component is used to represent keyboard inputs within documentation or articles. This component visually distinguishes keyboard commands or shortcuts, making it clear when specific keys or combinations are being referenced.

Usage

import React from 'react';
import { KBD } from '~/ui/components/Text';

export default function App() {
  return (
    <div>
      Press <KBD>Ctrl</KBD> + <KBD>C</KBD> to copy text.
    </div>
  );
}

Rendered Example

Press Ctrl + C to copy text.

Props

The KBD component accepts all standard HTML attributes for keyboard input elements, providing flexibility for customization in various instructional contexts.