# Tecla

> Teclas y combinaciones del teclado para atajos en menús, tooltips, campos y textos.

Categoría: Acción · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- Para mostrar un atajo junto a la acción que hace.
- Nunca como la única forma de hacer algo: el atajo acompaña a un botón o un menú.
- En Windows se muestra Ctrl; en Mac, ⌘.

## Teclas

```html
<div class="flex flex-wrap items-start justify-center gap-8"><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">Ctrl</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">Shift</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">Alt</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">⌘</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">↵</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">Esc</kbd></div>
```

## Combinación

```html
<div class="flex flex-wrap items-start justify-center gap-8"><span class="inline-flex items-center gap-1"><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">Ctrl</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">K</kbd></span><span class="inline-flex items-center gap-1"><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">Ctrl</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">Shift</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">P</kbd></span></div>
```

## En un texto

```html
<div class="flex flex-wrap items-start justify-center gap-8"><p class="text-sm">Presiona <span class="inline-flex gap-1 align-middle"><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">Ctrl</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">K</kbd></span> para buscar en cualquier página.</p></div>
```

## En un botón

```html
<div class="flex flex-wrap items-start justify-center gap-8"><button type="button" class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm bg-ccs-blue text-white hover:bg-ccs-blue-mid shadow-ccs-sm dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue active:scale-95 motion-reduce:active:scale-100">Guardar<kbd class="inline-flex h-5 items-center rounded-lg bg-ccs-blue-mid px-1.5 dark:bg-ccs-blue font-sans text-xs font-medium">Ctrl S</kbd></button><button type="button" class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Aceptar<kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">↵</kbd></button></div>
```

## En un tooltip

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-center"><span class="flex items-center gap-2 whitespace-nowrap rounded-lg bg-ccs-ink px-2.5 py-[5px] text-sm font-medium leading-[18px] text-white shadow-ccs-sm dark:bg-ccs-dark-text dark:text-ccs-dark-bg dark:shadow-none">Guardar<span class="flex gap-1"><kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded-lg px-1.5 font-sans text-xs font-medium bg-ccs-slate text-white dark:bg-ccs-line-strong dark:text-ccs-ink">Ctrl</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded-lg px-1.5 font-sans text-xs font-medium bg-ccs-slate text-white dark:bg-ccs-line-strong dark:text-ccs-ink">S</kbd></span></span><span class="-mt-1 w-2 h-2 rotate-45 bg-ccs-ink dark:bg-ccs-dark-text" aria-hidden="true"></span></div></div>
```

## En un campo

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm"><label for="ig-7" class="block text-sm font-medium mb-1.5">Buscar en el sitio</label><div class="flex items-center w-full h-11 rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><span class="pl-3 text-ccs-slate dark:text-ccs-dark-text-2"><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></span><input id="ig-7" placeholder="Buscar…" aria-keyshortcuts="Control+K Meta+K" class="peer flex-1 min-w-0 h-full bg-transparent px-3 text-sm text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2" /><span aria-hidden="true" class="pr-3 hidden gap-1 peer-focus:!hidden [@media(hover:hover)_and_(pointer:fine)]:peer-placeholder-shown:flex"><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">Ctrl</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">K</kbd></span></div></div></div>
```

## Guía: Accesibilidad

Va en <kbd>. Los símbolos se acompañan del nombre para el lector de pantalla cuando no son obvios: <kbd><span aria-hidden="true">↵</span><span>Enter</span></kbd>.