@hanzo/ui

Kbd

import { Kbd, KbdGroup } from '@hanzo/ui'

Single key

One `Kbd` for a lone shortcut like Escape.

EscEnter
export function SingleKey() {

  return (

    <XStack gap="$2" items="center">

      <Kbd>Esc</Kbd>

      <Kbd>Enter</Kbd>

    </XStack>

  )

}

Chord

`KbdGroup` sets several keys together to read as one shortcut.

CtrlBāŒ˜ShiftP
export function Chord() {

  return (

    <XStack gap="$3" items="center">

      <KbdGroup>

        <Kbd>Ctrl</Kbd>

        <Kbd>B</Kbd>

      </KbdGroup>

      <KbdGroup>

        <Kbd>āŒ˜</Kbd>

        <Kbd>Shift</Kbd>

        <Kbd>P</Kbd>

      </KbdGroup>

    </XStack>

  )

}

In a sentence

A shortcut referenced inline with ordinary text.

PressCtrl+Kto open the command palette.
export function InText() {

  return (

    <YStack gap="$2">

      <XStack gap="$1" items="center">

        <Text>Press</Text>

        <Kbd>Ctrl</Kbd>

        <Text>+</Text>

        <Kbd>K</Kbd>

        <Text>to open the command palette.</Text>

      </XStack>

    </YStack>

  )

}

Types

export type KbdProps = React.ComponentProps<'kbd'>
export type KbdGroupProps = React.ComponentProps<'kbd'>

Exports

KbdKbdGrouptype KbdGroupPropstype KbdProps