72Los geht’s
HextaUI

Kbd

Tastenkappen für Tastenkürzel, die auf jeder Plattform die richtigen Symbole zeigen, korrekt vorgelesen werden und sich wie echte Tasten eindrücken.

ShiftCommandP

Press Command K to search, or hold Shift and watch the keys.

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-6 text-sm text-muted-foreground">
      <KbdGroup keys="mod+shift+p" size="lg" listen />
      <p>
        Press <Kbd keys="mod+k" listen /> to search, or hold{" "}
        <Kbd keys="shift" listen /> and watch the keys.
      </p>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/kbd.json

Fügt die Komponente, die HextaUI-Theme-Tokens und alle HextaUI-Komponenten hinzu, von denen sie abhängt.

Verwendung

import { Kbd, KbdGroup } from "@/components/ui/kbd"
<KbdGroup keys="mod+k" />
<Kbd keys="escape" />
<Kbd>K</Kbd>

Schreibe Tastenkürzel einmal mit keys, und sie erscheinen als ⌘K auf dem Mac und Strg K unter Windows und Linux. Oder übergib beliebige Inhalte als children für volle Kontrolle.

Komposition

Kbd

KbdGroup
└── Kbd

Beispiele

Varianten

keycap hat eine feine Kante und eine 1px-Lippe, damit es wie eine echte Taste wirkt. flat ist eine ruhige Füllung für dichte Stellen wie Menüs.

import { KbdGroup } from "@/components/ui/kbd"

export function KbdVariants() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <KbdGroup keys="mod+c" />
      <KbdGroup keys="mod+c" variant="flat" />
    </div>
  )
}

Größen

sm passt in kleinen Text, default neben Fließtext und lg in Überschriften oder allein.

import { KbdGroup } from "@/components/ui/kbd"

const sizes = ["sm", "default", "lg"] as const

export function KbdSizes() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      {sizes.map((size) => (
        <KbdGroup key={size} keys="mod+shift+z" size={size} />
      ))}
    </div>
  )
}

Tastenkürzel

<KbdGroup /> teilt eine Kombination in je eine Taste auf. Ein Leerzeichen startet eine Sequenz, verbunden durch separator. <Kbd /> mit keys hält die ganze Kombination in einer Taste.

import { Kbd, KbdGroup } from "@/components/ui/kbd"

const shortcuts = [
  { label: "Command palette", keys: "mod+k" },
  { label: "Move line up", keys: "alt+up" },
  { label: "Close", keys: "escape" },
  { label: "Go to dashboard", keys: "g d" },
]

export function KbdShortcuts() {
  return (
    <dl className="grid w-full max-w-xs grid-cols-[1fr_auto] items-center gap-x-6 gap-y-3 text-sm">
      {shortcuts.map((shortcut) => (
        <div key={shortcut.keys} className="contents">
          <dt className="text-muted-foreground">{shortcut.label}</dt>
          <dd>
            <KbdGroup keys={shortcut.keys} />
          </dd>
        </div>
      ))}
      <dt className="text-muted-foreground">Save, as one cap</dt>
      <dd>
        <Kbd keys="mod+s" />
      </dd>
    </dl>
  )
}

Live-Tasten

Mit listen wird eine Taste gedrückt dargestellt, solange die echte Taste gehalten wird. Sie beobachtet nur und blockiert, verzögert oder verändert deine Eingabe nie. Buchstaben werden über die physische Taste erkannt, sodass Option und Shift sie nicht durcheinanderbringen.

import { Kbd, KbdGroup } from "@/components/ui/kbd"

const rows = ["qwertyuiop", "asdfghjkl", "zxcvbnm"]

export function KbdListen() {
  return (
    <KbdGroup listen size="lg" className="flex-col">
      {rows.map((row) => (
        <span key={row} className="flex gap-1">
          {row.split("").map((key) => (
            <Kbd key={key}>{key.toUpperCase()}</Kbd>
          ))}
        </span>
      ))}
      <span className="flex gap-1">
        <Kbd keys="shift" />
        <Kbd keys="space" className="min-w-40" />
        <Kbd keys="enter" />
      </span>
    </KbdGroup>
  )
}

In einem Button

Innerhalb eines Buttons übernimmt die Taste ihre Farben vom Text des Buttons und passt so zu jeder Variante.

import { IconSearch } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"

export function KbdButton() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button variant="outline">
        <IconSearch data-icon="inline-start" />
        Search
        <Kbd keys="mod+k" />
      </Button>
      <Button>
        Save
        <Kbd keys="mod+s" />
      </Button>
      <Button variant="ghost">
        Undo
        <Kbd keys="mod+z" variant="flat" />
      </Button>
    </div>
  )
}

Icons und Aktionen

Setze Icons in eine Taste für Aktionen ohne Tastennamen und gib ihnen ein visuell verstecktes Label.

import { IconArrowBackUp, IconClick } from "@tabler/icons-react"

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdComposed() {
  return (
    <div className="flex flex-col items-center gap-3 text-sm text-muted-foreground">
      <p className="flex items-center gap-2">
        <KbdGroup>
          <Kbd keys="shift" />
          <Kbd>
            <IconClick aria-hidden="true" />
            <span className="sr-only">Click</span>
          </Kbd>
        </KbdGroup>
        to select a range
      </p>
      <p className="flex items-center gap-2">
        <Kbd>
          <IconArrowBackUp aria-hidden="true" />
          <span className="sr-only">Backspace</span>
        </Kbd>
        to go back
      </p>
    </div>
  )
}

Rechts nach links

Tastenkürzel behalten in rechts-nach-links-Text die Reihenfolge von links nach rechts, wie auf der Tastatur aufgedruckt.

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdRtl() {
  return (
    <p
      dir="rtl"
      className="flex items-center gap-2 text-sm text-muted-foreground"
    >
      اضغط
      <KbdGroup keys="mod+shift+p" />
      لفتح لوحة الأوامر، أو <Kbd keys="escape" /> للإغلاق
    </p>
  )
}

Barrierefreiheit

  • Symbole wie ⌘ und ⇧ werden für Screenreader ausgeblendet und durch ihre Namen ersetzt, sodass keys="mod+shift+p" als „Command Shift P“ vorgelesen wird.
  • Tasten werden als <kbd> gerendert, und eine Gruppe verschachtelt sie in einem weiteren <kbd>, so kennzeichnet HTML eine Tastenkombination.
  • Ein angezeigtes Tastenkürzel ist noch nicht gebunden. Registriere den Key-Handler selbst.
  • Der Druckeffekt ist Dekoration; bei reduzierter Bewegung wechselt stattdessen die Farbe, statt dass sich etwas bewegt. Vor der Hydration sehen alle Plattformen die Apple-Symbole.

API-Referenz

Beide Teile rendern ein <kbd> und akzeptieren render samt dessen Attributen.

Kbd

PropTypStandard
keysTasten, mit + verbunden, etwa "mod+shift+p". mod ist ⌘ auf Apple-Geräten und sonst Strg. Namen wie alt, enter, escape, up und space werden zu Symbolen oder Kurzwörtern und erhalten einen gesprochenen Namen für Screenreader.
string–
variantWird von KbdGroup übernommen, wenn nicht gesetzt.
"keycap" | "flat""keycap"
sizeWird von KbdGroup übernommen, wenn nicht gesetzt.
"sm" | "default" | "lg""default"
listenDrückt die Taste, solange die echte Taste gehalten wird. Funktioniert mit keys oder einem einfachen Tastennamen als children.
booleanfalse
render
ReactElement | (props, state) => ReactElement<kbd>
AttributBeschreibung
data-slot="kbd"Tasten per CSS ansprechen.
data-variantDie aktuelle Variante.
data-sizeDie aktuelle Größe.
data-pressedVorhanden, solange die echte Taste gedrückt ist.

KbdGroup

PropTypStandard
keysTasten, mit + verbunden, etwa "mod+shift+p". mod ist ⌘ auf Apple-Geräten und sonst Strg. Namen wie alt, enter, escape, up und space werden zu Symbolen oder Kurzwörtern und erhalten einen gesprochenen Namen für Screenreader. Leerzeichen trennen die Schritte einer Sequenz.
string–
separatorWird zwischen den Schritten einer Sequenz angezeigt.
ReactNode"then"
variantWird an jede enthaltene Taste weitergegeben.
"keycap" | "flat"–
sizeWird an jede enthaltene Taste weitergegeben.
"sm" | "default" | "lg"–
listenWird an jede enthaltene Taste weitergegeben.
boolean–
render
ReactElement | (props, state) => ReactElement<kbd>
AttributBeschreibung
data-slot="kbd-group"Gruppen in CSS ansprechen.
data-slot="kbd-separator"Der Text zwischen den Schritten einer Sequenz.

Verwandt

In Blocks verwendet

Blocks, die auf Kbd aufbauen.