Kbd

Kbd (키보드 키 표시)

Kbd 컴포넌트는 키보드의 키를 화면에 표시하는 컴포넌트예요. 단축키 안내 문구를 만들 때 유용해요.

출처: 문서

키보드 키를 하이라이트해서 표시하고 싶을 때 Kbd 컴포넌트를 사용해요.

import { Kbd } from '@mantine/core';

function Demo() {
  return (
    <>
      <Kbd>⌘</Kbd> + <Kbd>Shift</Kbd> + <Kbd>M</Kbd>
    </>
  );
}

size prop으로 키의 크기를 조절할 수 있어요. 지원하는 크기는 xs, sm, md, lg, xl이에요.

import { Kbd } from '@mantine/core';

function Demo() {
  return <Kbd>Shift</Kbd>;
}