Kbd

Muestra qué tecla o combinación de teclas presionar en el teclado.

Ctrl

default.tsx

1'use client';
2
3import { Kbd } from '@/components/ui/kbd';
4
5export function Default() {
6  return <Kbd>Ctrl</Kbd>;
7}

Instalación

pnpm dlx nachui add kbd

Anatomía

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

1<Kbd>Ctrl</Kbd>

1<KbdGroup>
2  <Kbd>Ctrl</Kbd>
3  <span>+</span>
4  <Kbd>K</Kbd>
5</KbdGroup>

Tamaños

Usa la propiedad size para controlar el tamaño del componente <Kbd>.

⌘⌘⌘

sizes.tsx

1'use client';
2
3import { Kbd } from '@/components/ui/kbd';
4
5export function Sizes() {
6  return (
7    <div className="flex items-center gap-4">
8      <Kbd size="sm">⌘</Kbd>
9      <Kbd size="default">⌘</Kbd>
10      <Kbd size="lg">⌘</Kbd>
11    </div>
12  );
13}

Variantes

Puedes alternar los estilos del teclado proporcionando un variant.

ShiftShift

variants.tsx

1'use client';
2
3import { Kbd } from '@/components/ui/kbd';
4
5export function Variants() {
6  return (
7    <div className="flex items-center gap-4">
8      <Kbd variant="default">Shift</Kbd>
9      <Kbd variant="outline">Shift</Kbd>
10    </div>
11  );
12}

Grupos de teclas

Usa el componente <KbdGroup> para envolver múltiples etiquetas <Kbd> o agrupar comandos lógicamente con un espaciado consistente.

Ctrl+⇧+K

with-group.tsx

1'use client';
2
3import { Kbd, KbdGroup } from '@/components/ui/kbd';
4
5export function WithGroup() {
6  return (
7    <div className="flex items-center gap-6">
8      <KbdGroup>
9        <Kbd abbrTitle="Control">Ctrl</Kbd>
10        <span>+</span>
11        <Kbd abbrTitle="Shift">⇧</Kbd>
12        <span>+</span>
13        <Kbd>K</Kbd>
14      </KbdGroup>
15    </div>
16  );
17}

Referencia de API

Kbd

Las propiedades adicionales como className u otras de HTML se extienden directamente hacia el elemento <kbd>.

Prop	Tipo	Por defecto	Descripción
`size`	`'default' \| 'sm' \| 'lg'`	`'default'`	Ajusta las dimensiones del componente interactivo
`variant`	`'default' \| 'outline'`	`'default'`	Estilo visual del elemento
`abbrTitle`	`string`	-	Añade un atributo title al elemento, útil en abreviaturas

KbdGroup

Contenedor para agrupar las teclas. Recibe propiedades comunes de HTML (HTMLAttributes<HTMLSpanElement>).

AnteriorInput SiguienteLabel