مفتاح

import { Kbd } from 'topclassui/kbd'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Kbd>K</Kbd>
      <Kbd>Tab</Kbd>
      <Kbd>Ctrl</Kbd>
      <Kbd>Shift</Kbd>
      <Kbd>Enter</Kbd>
      <Kbd>Esc</Kbd>
    </div>
  )
}

import { Kbd } from 'topclassui/kbd'

/** The two pairs the Components page captions, as sibling keys on a raised card: no group, no plus. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-3 rounded-box border border-line bg-surface-raised p-4 text-sm text-body">
      <p>Press <Kbd>Ctrl</Kbd> <Kbd>K</Kbd> to open the command palette.</p>
      <p>Press <Kbd>Shift</Kbd> <Kbd>Tab</Kbd> to move focus backwards.</p>
    </div>
  )
}

import { command } from 'topclassui/icons/command'
import { Svg } from 'topclassui/svg'
import { Kbd } from 'topclassui/kbd'

/** The docs sample: the icon takes no size, so at its 1em default it follows the key's text. */
export default function Demo() {
  return (
    <p className="text-sm text-body">
      Press <Kbd><Svg icon={command} label="Command" /></Kbd> <Kbd>K</Kbd> to open the command palette.
    </p>
  )
}

import { Kbd } from 'topclassui/kbd'

/** The nested form of the HTML spec: a plain outer kbd the caller writes. It stays inline, so its
 * keys follow the sentence in both directions, as sibling keys do. */
export default function Demo() {
  return (
    <p className="text-sm text-body">
      Press <kbd className="whitespace-nowrap"><Kbd>Shift</Kbd> <Kbd>Tab</Kbd></kbd> to move focus backwards.
    </p>
  )
}

import { Kbd } from 'topclassui/kbd'

export default function Demo() {
  return (
    <div dir="rtl" lang="ar" className="flex flex-col gap-3 text-sm text-body">
      <p>اضغط <Kbd>Ctrl</Kbd> <Kbd>K</Kbd> لفتح لوحة الأوامر.</p>
      <p>اضغط <Kbd>Shift</Kbd> <Kbd>Tab</Kbd> للرجوع إلى العنصر السابق.</p>
    </div>
  )
}