Kbd

Affichez les touches et raccourcis clavier.

Import

import { Kbd } from 'asterui'

Exemples

Basique

Affichage simple de touche clavier.

</>

K

import { Kbd } from 'asterui'

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

export default App

Tailles

Différentes tailles pour divers contextes.

</>

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

Combinaison de touches

Affichez les raccourcis clavier.

</>

⌘+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

Dans le texte

Utilisez kbd en ligne avec du texte.

</>

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

Touches fléchées

Affichage des touches fléchées pour les instructions de navigation.

</>

▲

◀▼▶

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

Clavier complet

Exemple de disposition de clavier complète.

</>

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

Propriété	Description	Type	Par défaut
size	Taille du kbd	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
children	Contenu de la touche	React.ReactNode	-
className	Classes CSS supplémentaires	string	-

Accessibilité

• Utilise l’élément HTML sémantique <kbd>
• Les lecteurs d’écran annoncent les touches clavier de manière appropriée
• Le style à contraste élevé garantit la visibilité