FundamentosServer Component

Kbd

Una tecla o un atajo en línea, en Geist Mono.

import { Kbd } from "sebs7n-ui/kbd"

Ejemplos

Atajos en línea

Abrí la paleta con ⌘ K y cerrá cualquier panel con Esc.

import { Kbd } from "sebs7n-ui/kbd"

function Basico() {
  return (
    <p className="text-copy-14 text-gray-900">
      Abrí la paleta con <Kbd>⌘</Kbd> <Kbd>K</Kbd> y cerrá cualquier panel con <Kbd>Esc</Kbd>.
    </p>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Kbd

Hereda las props de <kbd>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

Teclado

—: Es texto.

Accesibilidad

Emite <kbd>, que es lo que corresponde. No registra ningún atajo: solo lo muestra.

Reglas de uso

Para anunciar el atajo, aria-keyshortcuts va en el control que lo dispara, no en el Kbd.
Símbolos de Mac (⌘, ⌥, ⇧) o nombres (Ctrl, Alt): elegí uno y mantenelo en toda la app.

Relacionados

Sidebar DropdownMenu