Saltar al contenido principal

Kbd

Mostrar atajos de teclado. Educar power users. Acelerar flujos.

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

5const sizes = ['sm', 'default', 'lg'] as const;
6

7export function Sizes() {
8  return (
9    <div className="flex items-center gap-4">
10      {sizes.map((size) => (
11        <Kbd key={size} size={size}>
12          ⌘
13        </Kbd>
14      ))}
15    </div>
16  );
17}

Variantes

Puedes alternar los estilos del teclado proporcionando un variant.
ShiftShift
variants.tsx
1'use client';
2

3import { Kbd } from '@/components/ui/kbd';
4

5const variants = ['default', 'outline'] as const;
6

7export function Variants() {
8  return (
9    <div className="flex items-center gap-4">
10      {variants.map((variant) => (
11        <Kbd key={variant} variant={variant}>
12          Shift
13        </Kbd>
14      ))}
15    </div>
16  );
17}

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>.
PropTipoPor defectoDescripción
size'default' | 'sm' | 'lg''default'Ajusta las dimensiones del componente interactivo
variant'default' | 'outline''default'Estilo visual del elemento
abbrTitlestring-Añade un atributo title al elemento, útil en abreviaturas

KbdGroup

Contenedor para agrupar las teclas. Recibe propiedades comunes de HTML (HTMLAttributes<HTMLSpanElement>).
¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue
AnteriorInput
SiguienteLabel