Kbd

키보드의 텍스트 사용자 입력을 표시하는 데 사용됩니다.

⌘ ⇧ ⌥ ⌃ Ctrl + B

<script lang="ts">
  import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>
 
<div class="flex flex-col items-center gap-4">
  <Kbd.Group>
    <Kbd.Root>⌘</Kbd.Root>
    <Kbd.Root>⇧</Kbd.Root>
    <Kbd.Root>⌥</Kbd.Root>
    <Kbd.Root>⌃</Kbd.Root>
  </Kbd.Group>
  <Kbd.Group>
    <Kbd.Root>Ctrl</Kbd.Root>
    <span>+</span>
    <Kbd.Root>B</Kbd.Root>
  </Kbd.Group>
</div>

설치

pnpm dlx shadcn-svelte@latest add kbd

npx shadcn-svelte@latest add kbd

npx shadcn-svelte@latest add kbd

bun x shadcn-svelte@latest add kbd

다음 코드를 복사하여 프로젝트에 붙여넣으세요.

import Root from "./kbd.svelte";
import Group from "./kbd-group.svelte";

export {
  Root,
  Group,
  //
  Root as Kbd,
  Group as KbdGroup,
};

사용법

<script lang="ts">
  import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>

<Kbd.Root>B</Kbd.Root>

예제

Group

Kbd.Group 컴포넌트를 사용하여 키보드 키를 함께 그룹화합니다.

명령 팔레트를 열려면 Ctrl + B Ctrl + K 를 사용하세요

<script lang="ts">
  import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>
 
<div class="flex flex-col items-center gap-4">
  <p class="text-muted-foreground text-sm">
    명령 팔레트를 열려면
    <Kbd.Group>
      <Kbd.Root>Ctrl + B</Kbd.Root>
      <Kbd.Root>Ctrl + K</Kbd.Root>
    </Kbd.Group>
    를 사용하세요
  </p>
</div>

Button

Button 컴포넌트 내부에 Kbd.Root 컴포넌트를 사용하여 버튼 안에 키보드 키를 표시합니다.

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>
 
<div class="flex flex-wrap items-center gap-4">
  <Button variant="outline" size="sm" class="pe-2">
    수락 <Kbd.Root>⏎</Kbd.Root>
  </Button>
  <Button variant="outline" size="sm" class="pe-2">
    취소 <Kbd.Root>Esc</Kbd.Root>
  </Button>
</div>

Tooltip 컴포넌트 내부에 Kbd.Root 컴포넌트를 사용하여 키보드 키가 포함된 툴팁을 표시할 수 있습니다.

<script lang="ts">
  import * as ButtonGroup from "$lib/components/ui/button-group/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Kbd from "$lib/components/ui/kbd/index.js";
  import * as Tooltip from "$lib/components/ui/tooltip/index.js";
</script>
 
<div class="flex flex-wrap gap-4">
  <ButtonGroup.Root>
    <Tooltip.Root>
      <Tooltip.Trigger>
        {#snippet child({ props })}
          <Button size="sm" variant="outline" {...props}>저장</Button>
        {/snippet}
      </Tooltip.Trigger>
      <Tooltip.Content>
        <div class="flex items-center gap-2">
          변경사항 저장 <Kbd.Root>S</Kbd.Root>
        </div>
      </Tooltip.Content>
    </Tooltip.Root>
    <Tooltip.Root>
      <Tooltip.Trigger>
        {#snippet child({ props })}
          <Button size="sm" variant="outline" {...props}>인쇄</Button>
        {/snippet}
      </Tooltip.Trigger>
      <Tooltip.Content>
        <div class="flex items-center gap-2">
          문서 인쇄
          <Kbd.Group>
            <Kbd.Root>Ctrl</Kbd.Root>
            <Kbd.Root>P</Kbd.Root>
          </Kbd.Group>
        </div>
      </Tooltip.Content>
    </Tooltip.Root>
  </ButtonGroup.Root>
</div>

Input Group

InputGroup.Addon 컴포넌트 내부에 Kbd.Root 컴포넌트를 사용하여 입력 그룹 안에 키보드 키를 표시할 수 있습니다.

⌘ K

<script lang="ts">
  import * as Kbd from "$lib/components/ui/kbd/index.js";
  import * as InputGroup from "$lib/components/ui/input-group/index.js";
  import SearchIcon from "@lucide/svelte/icons/search";
</script>
 
<div class="flex w-full max-w-xs flex-col gap-6">
  <InputGroup.Root>
    <InputGroup.Input placeholder="검색..." />
    <InputGroup.Addon>
      <SearchIcon />
    </InputGroup.Addon>
    <InputGroup.Addon align="inline-end">
      <Kbd.Root>⌘</Kbd.Root>
      <Kbd.Root>K</Kbd.Root>
    </InputGroup.Addon>
  </InputGroup.Root>
</div>

Item Label