Todos los componentes (204)

Tecla

Tipografía · Kbd · .amset-kbd

Qué es y cuándo usarlo

Una tecla del teclado, dentro de una frase: Esc, Ctrl, ⌘. Se pinta con relieve por debajo para que se lea como una tecla y no como código.

Cuándo usarlo

Un atajo en una ayuda, un aviso o un menú contextual: «Abre el buscador con Ctrl + K».
Una tecla por elemento. Un atajo de varias teclas son varios Kbd con el separador en medio como texto (<Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>), no uno solo con «Ctrl+K» dentro.
Su tamaño es relativo (0.8em): sigue al texto que lo rodea, en un párrafo o en un pie pequeño.

Cuándo no

Un trozo de código o el nombre de una variable: Code.
El atajo de cada orden de CommandPalette: va en su shortcut y lo pinta la propia paleta.

Teclado: no participa. No es interactiva: enseña una tecla, no la escucha.

Accesibilidad: es un <kbd> de verdad, el elemento que HTML tiene para lo que se teclea. Con una tecla por elemento, cada una llega por separado al árbol de accesibilidad, y no como una sola palabra «Ctrl+K». Una tecla no parte de línea por dentro.

Aspecto fino: --amset-kbd-background, --amset-kbd-color y --amset-kbd-border (el borde, que por debajo mide 2 px para dar el relieve).

Cómo se ve

Pulsa Ctrl y K para buscar.

<Text>Pulsa <Kbd>Ctrl</Kbd> y <Kbd>K</Kbd> para buscar.</Text>

Props

Se importa con import { Kbd } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	La tecla: `Esc`, `⌘`, `Ctrl`. Una sola por elemento.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-kbd-background`	`var(--amset-surface)`
`--amset-kbd-color`	`var(--amset-ink)`
`--amset-kbd-border`	`var(--amset-border-bold)`

Cómo se cambia

.amset-kbd {
  --amset-kbd-background: ...;
  --amset-kbd-color: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: