Kbd

Display keyboard keys and shortcuts.

Import

import { Kbd } from 'asterui'

Examples

Basic

Simple keyboard key display.

</>

K

import { Kbd } from 'asterui'

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

export default App

Sizes

Different sizes for various contexts.

</>

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

Key Combination

Display keyboard shortcuts.

</>

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

In Text

Use kbd inline with text.

</>

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

Arrow Keys

Arrow key display for navigation instructions.

</>

▲

◀▼▶

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

Full Keyboard

Complete keyboard layout example.

</>

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

Property	Description	Type	Default
size	Size of the kbd	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
children	Key content	React.ReactNode	-
className	Additional CSS classes	string	-

Accessibility

• Uses semantic <kbd> HTML element
• Screen readers announce keyboard keys appropriately
• High contrast styling ensures visibility