Moodinary/UI

Kbd

Atajos de teclado en menús, tooltips y ayuda.

Muestra teclas y atajos en menús, tooltips y ayudas. El buscador del panel usa ⌘K en una sola pieza y agrupa ↑↓ en la ayuda para navegar.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/kbd.json
import
import { Kbd } from "@moodinary/ui/components/kbd";

Ejemplos

Atajos

Combinaciones, teclas especiales y flechas.

Buscar ⌘K↑↓ navegarEnter abrirEsc cerrar
Código
shortcuts.tsx
import { Kbd } from "@moodinary/ui/components/kbd";

export default function KbdShortcuts() {
	return (
		<>
			<span className="inline-flex items-center gap-1.5">
				Buscar <Kbd aria-label="Command K">⌘K</Kbd>
			</span>
			<span className="inline-flex items-center gap-1.5">
				<Kbd aria-label="Flechas arriba y abajo">↑↓</Kbd> navegar
			</span>
			<span className="inline-flex items-center gap-1.5">
				<Kbd>Enter</Kbd> abrir
			</span>
			<span className="inline-flex items-center gap-1.5">
				<Kbd aria-label="Escape">Esc</Kbd> cerrar
			</span>
		</>
	);
}

Props

Kbd

PropTipoDefaultDescripción
childrenReactNode-Tecla o símbolo.
classNamestring-Clases extra.

Cuándo sí y cuándo no

Hacé
  • Agrupá una combinación corta cuando la ayuda del panel la muestra junta.
  • Mostrá los símbolos del sistema cuando correspondan.
  • Acompañá el atajo con el nombre de la acción.
Evitá
  • No inventes atajos que no existen.
  • No lo uses para código.
  • No metas frases completas.

Accesibilidad

  • Se renderiza como <kbd>.
  • Para símbolos ambiguos, agregá aria-label con el nombre de la tecla.