72Empezar
HextaUI

Kbd

Teclas para atajos que muestran los símbolos correctos en cada plataforma, se leen en voz alta correctamente y se hunden como las teclas reales.

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>
  )
}

Instalación

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

Añade el componente, los tokens del tema de HextaUI y los componentes de HextaUI de los que depende.

Uso

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

Escribe los atajos una vez con keys y se mostrarán como ⌘K en Mac y Ctrl K en Windows y Linux. O pasa cualquier contenido como children para tener control total.

Composición

Kbd

KbdGroup
└── Kbd

Ejemplos

Variantes

keycap tiene un borde fino y un labio de 1px para que parezca una tecla física. flat es un relleno discreto para lugares densos como los 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>
  )
}

Tamaños

sm va en texto pequeño, default junto al texto del cuerpo y lg en títulos o por sí solo.

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>
  )
}

Atajos

<KbdGroup /> divide una combinación en una tecla por cada cap. Un espacio inicia una secuencia, unida por separator. <Kbd /> con keys mantiene toda la combinación en un solo cap.

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>
  )
}

Teclas en vivo

Con listen, un cap se hunde mientras su tecla real está pulsada. Solo observa, así que nunca bloquea, retrasa ni cambia lo que escribes. Las letras se comparan por tecla física, por lo que Option y Shift no se confunden.

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>
  )
}

En un botón

Dentro de un botón, el cap toma sus colores del texto del botón, así que encaja con todas las variantes.

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>
  )
}

Iconos y acciones

Pon iconos en un cap para acciones sin nombre de tecla, y dales una etiqueta visualmente oculta.

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>
  )
}

De derecha a izquierda

Los atajos mantienen el orden de izquierda a derecha dentro de texto de derecha a izquierda, tal como están impresos en el teclado.

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>
  )
}

Accesibilidad

  • Símbolos como ⌘ y ⇧ se ocultan a los lectores de pantalla y se sustituyen por sus nombres, así que keys="mod+shift+p" se lee como "Command Shift P".
  • Los caps se renderizan como <kbd>, y un grupo los anida dentro de otro <kbd>, que es como HTML marca una combinación de teclas.
  • Mostrar un atajo no lo asigna. Registra tú mismo el manejador de la tecla.
  • El efecto de pulsación es decorativo, con un cambio de color en lugar de movimiento cuando el movimiento reducido está activado. Antes de la hidratación, todas las plataformas ven los símbolos de Apple.

Referencia de la API

Ambas partes renderizan un <kbd> y aceptan render y sus atributos.

Kbd

PropTipoPredeterminado
keysTeclas unidas con +, como "mod+shift+p". mod es ⌘ en dispositivos Apple y Ctrl en el resto. Nombres como alt, enter, escape, up y space se convierten en símbolos o palabras cortas, y reciben un nombre hablado para los lectores de pantalla.
string–
variantSe hereda de KbdGroup cuando no se define.
"keycap" | "flat""keycap"
sizeSe hereda de KbdGroup cuando no se define.
"sm" | "default" | "lg""default"
listenHunde el cap mientras su tecla real está pulsada. Funciona con keys o con un nombre de tecla simple como children.
booleanfalse
render
ReactElement | (props, state) => ReactElement<kbd>
AtributoDescripción
data-slot="kbd"Apunta a los caps en CSS.
data-variantLa variante actual.
data-sizeEl tamaño actual.
data-pressedPresente mientras la tecla real está pulsada.

KbdGroup

PropTipoPredeterminado
keysTeclas unidas con +, como "mod+shift+p". mod es ⌘ en dispositivos Apple y Ctrl en el resto. Nombres como alt, enter, escape, up y space se convierten en símbolos o palabras cortas, y reciben un nombre hablado para los lectores de pantalla. Los espacios separan los pasos de una secuencia.
string–
separatorSe muestra entre los pasos de una secuencia.
ReactNode"then"
variantSe pasa a cada cap del interior.
"keycap" | "flat"–
sizeSe pasa a cada cap del interior.
"sm" | "default" | "lg"–
listenSe pasa a cada cap del interior.
boolean–
render
ReactElement | (props, state) => ReactElement<kbd>
AtributoDescripción
data-slot="kbd-group"Apunta a los grupos en CSS.
data-slot="kbd-separator"El texto entre los pasos de una secuencia.

Relacionado

Usado en bloques

Bloques que se construyen sobre Kbd.