Kbd

Muestra teclas del teclado y atajos.

Importar

import { Kbd } from 'asterui'

Ejemplos

Básico

Visualización simple de tecla del teclado.

</>

K

import { Kbd } from 'asterui'

function App() {
  return (
      <Kbd>K</Kbd>
    )
}

export default App

Tamaños

Diferentes tamaños para varios contextos.

</>

xssmmdlgxl

import { Kbd, Space } from 'asterui'

function App() {
  return (
      <Space align="center">
        <Kbd size="xs">xs</Kbd>
        <Kbd size="sm">sm</Kbd>
        <Kbd size="md">md</Kbd>
        <Kbd size="lg">lg</Kbd>
        <Kbd size="xl">xl</Kbd>
      </Space>
    )
}

export default App

Combinación de Teclas

Muestra atajos de teclado.

</>

⌘+K

import { Kbd, Space } from 'asterui'

function App() {
  return (
      <Space align="center" size="xs">
        <Kbd>⌘</Kbd>
        <span>+</span>
        <Kbd>K</Kbd>
      </Space>
    )
}

export default App

En Texto

Usa kbd en línea con texto.

</>

Press F to pay respects.

import { Kbd, Typography } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <Paragraph>
        Press <Kbd size="sm">F</Kbd> to pay respects.
      </Paragraph>
    )
}

export default App

Teclas de Flecha

Visualización de teclas de flecha para instrucciones de navegación.

</>

▲

◀▼▶

import { Kbd, Space } from 'asterui'

function App() {
  return (
      <div className="flex flex-col items-center gap-1">
        <Kbd>▲</Kbd>
        <Space size="xs">
          <Kbd>◀</Kbd>
          <Kbd>▼</Kbd>
          <Kbd>▶</Kbd>
        </Space>
      </div>
    )
}

export default App

Teclado Completo

Ejemplo de diseño de teclado completo.

</>

qwertyuiop

asdfghjkl

zxcvbnm

import { Kbd } from 'asterui'

function App() {
  return (
      <div className="flex flex-col gap-1">
        <div className="flex gap-1">
          <Kbd>q</Kbd><Kbd>w</Kbd><Kbd>e</Kbd><Kbd>r</Kbd><Kbd>t</Kbd>
          <Kbd>y</Kbd><Kbd>u</Kbd><Kbd>i</Kbd><Kbd>o</Kbd><Kbd>p</Kbd>
        </div>
        <div className="flex gap-1 ml-2">
          <Kbd>a</Kbd><Kbd>s</Kbd><Kbd>d</Kbd><Kbd>f</Kbd><Kbd>g</Kbd>
          <Kbd>h</Kbd><Kbd>j</Kbd><Kbd>k</Kbd><Kbd>l</Kbd>
        </div>
        <div className="flex gap-1 ml-6">
          <Kbd>z</Kbd><Kbd>x</Kbd><Kbd>c</Kbd><Kbd>v</Kbd>
          <Kbd>b</Kbd><Kbd>n</Kbd><Kbd>m</Kbd>
        </div>
      </div>
    )
}

export default App

API

Kbd

Propiedad	Descripción	Tipo	Predeterminado
size	Tamaño del kbd	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
children	Contenido de la tecla	React.ReactNode	-
className	Clases CSS adicionales	string	-

Accesibilidad

• Usa elemento HTML semántico <kbd>
• Los lectores de pantalla anuncian las teclas del teclado apropiadamente
• El estilo de alto contraste asegura visibilidad