Kbd

Kbd shows a keyboard key, such as Esc or ⌘. Use it to document shortcuts. For a key combination, wrap several Kbd elements in KbdGroup.

⌘⌘K

'use client';

import { Kbd, KbdGroup } from '@/components/nxds/components/kbd/kbd';

export default function KbdDefault() {
  return (
    <div className="nx:flex nx:items-center nx:gap-4">
      <Kbd>⌘</Kbd>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
    </div>
  );
}

Installation

npx nxds-cli@latest add kbd

Run npx nxds-cli@latest init first if nxds isn’t set up in your app yet. See Install.

Usage

import { Kbd, KbdGroup } from '@/components/nxds/components/kbd/kbd';

Composition

Kbd
KbdGroup
└── Kbd

Examples

Single keys

Show single keys as caps that widen to fit longer labels.

⌘⇧⌥⌃EscEnter

'use client';

import { Kbd } from '@/components/nxds/components/kbd/kbd';

export default function KbdSingleKeys() {
  return (
    <div className="nx:flex nx:items-center nx:gap-2">
      <Kbd>⌘</Kbd>
      <Kbd>⇧</Kbd>
      <Kbd>⌥</Kbd>
      <Kbd>⌃</Kbd>
      <Kbd>Esc</Kbd>
      <Kbd>Enter</Kbd>
    </div>
  );
}

Separated chord

Put a literal + between keys inside a KbdGroup.

⌘+K

'use client';

import { Kbd, KbdGroup } from '@/components/nxds/components/kbd/kbd';

export default function KbdSeparatedChord() {
  return (
    <KbdGroup className="nx:gap-2">
      <Kbd>⌘</Kbd>
      <span className="nx:text-muted-foreground">+</span>
      <Kbd>K</Kbd>
    </KbdGroup>
  );
}

With icon

Place an icon inside a key cap, sized to match the text.

K

'use client';

import { MagnifyingGlassIcon } from '@phosphor-icons/react/ssr';

import { Kbd } from '@/components/nxds/components/kbd/kbd';

export default function KbdWithIcon() {
  return (
    <Kbd>
      <MagnifyingGlassIcon aria-hidden />K
    </Kbd>
  );
}

This example also needs:

npm install @phosphor-icons/react@^2.1.10

Props

Kbd

Kbd adds no props of its own; it accepts the props of the element or primitive it wraps.

KbdGroup

KbdGroup adds no props of its own; it accepts the props of the element or primitive it wraps.

Kbd shows a keyboard key, such as Esc or ⌘. Use it to document shortcuts. For a key combination, wrap several Kbd elements in KbdGroup.

<script setup lang="ts">
import { Kbd, KbdGroup } from '@/components/kbd';
</script>

<template>
  <div class="nx:flex nx:items-center nx:gap-4">
    <Kbd>⌘</Kbd>
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  </div>
</template>

Installation

Copy and paste the following code into your project.

components/kbd/Kbd.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface KbdProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<KbdProps>();
</script>

<template>
  <kbd
    data-slot="kbd"
    :class="
      cn(
        'nx:pointer-events-none nx:inline-flex nx:h-5 nx:w-fit nx:min-w-5 nx:items-center nx:justify-center nx:gap-1 nx:rounded-sm nx:bg-muted nx:px-1 nx:typography-label-small nx:text-muted-foreground nx:select-none nx:[&_svg]:size-3',
        props.class
      )
    "
  >
    <slot />
  </kbd>
</template>

components/kbd/KbdGroup.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface KbdGroupProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<KbdGroupProps>();
</script>

<template>
  <kbd
    data-slot="kbd-group"
    :class="cn('nx:inline-flex nx:items-center nx:gap-1', props.class)"
  >
    <slot />
  </kbd>
</template>

components/kbd/index.ts

export { default as Kbd, type KbdProps } from './Kbd.vue';
export { default as KbdGroup, type KbdGroupProps } from './KbdGroup.vue';

Keep each file at the path shown above it.
Paths are relative to packages/vue/src/. Keep the same folders under your @/ root, and the imports between files work without edits.

Usage

import { Kbd, KbdGroup } from '@/components/kbd';

Examples

Single keys

Show single keys as caps that widen to fit longer labels.

<script setup lang="ts">
import { Kbd } from '@/components/kbd';
</script>

<template>
  <div class="nx:flex nx:items-center nx:gap-2">
    <Kbd>⌘</Kbd>
    <Kbd>⇧</Kbd>
    <Kbd>⌥</Kbd>
    <Kbd>⌃</Kbd>
    <Kbd>Esc</Kbd>
    <Kbd>Enter</Kbd>
  </div>
</template>

Separated chord

Put a literal + between keys inside a KbdGroup.

<script setup lang="ts">
import { Kbd, KbdGroup } from '@/components/kbd';
</script>

<template>
  <KbdGroup class="nx:gap-2">
    <Kbd>⌘</Kbd>
    <span class="nx:text-muted-foreground">+</span>
    <Kbd>K</Kbd>
  </KbdGroup>
</template>

With icon

Place an icon inside a key cap, sized to match the text.

<script setup lang="ts">
import { PhMagnifyingGlass } from '@phosphor-icons/vue';

import { Kbd } from '@/components/kbd';
</script>

<template>
  <Kbd><PhMagnifyingGlass aria-hidden="true" />K</Kbd>
</template>

This example also needs:

npm install @phosphor-icons/vue@^2.2.1

Props

Kbd

Kbd adds no props of its own; it accepts the props of the element or primitive it wraps.

KbdGroup

KbdGroup adds no props of its own; it accepts the props of the element or primitive it wraps.