Kbd

Exiba teclas e atalhos de teclado.

Importação

import { Kbd } from 'asterui'

Exemplos

Básico

Exibição simples de tecla de teclado.

</>

K

import { Kbd } from 'asterui'

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

export default App

Tamanhos

Diferentes tamanhos para vários 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

Combinação de Teclas

Exiba atalhos 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

No Texto

Use kbd inline com 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 Seta

Exibição de teclas de seta para instruções de navegação.

</>

▲

◀▼▶

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

Exemplo de layout 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

Propriedade	Descrição	Tipo	Padrão
size	Tamanho do kbd	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
children	Conteúdo da tecla	React.ReactNode	-
className	Classes CSS adicionais	string	-

Acessibilidade

• Usa elemento HTML <kbd> semântico
• Leitores de tela anunciam teclas de teclado apropriadamente
• Estilo de alto contraste garante visibilidade