Kbd

Solidtype_heroui.Kbd is a <kbd> with the classes HeroUI’s own kbdVariants gives, each modifier drawn by its symbol and named by its <abbr>’s title, as HeroUI’s are. A key has no behaviour, so no Kobalte component underlies it.

Usage

⌘K⇧P⌃C⌥D

kbd_usage.mlx

module Kbd = Solidtype_heroui.Kbd

let make () =
  <div class_="flex items-center gap-4">
    <Kbd><Kbd.Abbr key_value=`command /> <Kbd.Content>"K"</Kbd.Content></Kbd>
    <Kbd><Kbd.Abbr key_value=`shift /> <Kbd.Content>"P"</Kbd.Content></Kbd>
    <Kbd><Kbd.Abbr key_value=`ctrl /> <Kbd.Content>"C"</Kbd.Content></Kbd>
    <Kbd><Kbd.Abbr key_value=`option /> <Kbd.Content>"D"</Kbd.Content></Kbd>
  </div>

Anatomy

<Kbd>
  <Kbd.Abbr key_value=`command />
  <Kbd.Content>"K"</Kbd.Content>
</Kbd>

Examples

Variants

Copy:⌘C⌘C

Paste:⌘V⌘V

Cut:⌘X⌘X

Undo:⌘Z⌘Z

Redo:⌘⇧Z⌘⇧Z

kbd_variants.mlx

module Kbd = Solidtype_heroui.Kbd

let make () =
  <div class_="flex flex-col gap-4">
    <div class_="flex items-center gap-2">
      <span>"Copy:"</span>
      <Kbd><Kbd.Abbr key_value=`command /> <Kbd.Content>"C"</Kbd.Content></Kbd>
      <Kbd variant=`light>
        <Kbd.Abbr key_value=`command /> <Kbd.Content>"C"</Kbd.Content>
      </Kbd>
    </div>
    <div class_="flex items-center gap-2">
      <span>"Paste:"</span>
      <Kbd><Kbd.Abbr key_value=`command /> <Kbd.Content>"V"</Kbd.Content></Kbd>
      <Kbd variant=`light>
        <Kbd.Abbr key_value=`command /> <Kbd.Content>"V"</Kbd.Content>
      </Kbd>
    </div>
    <div class_="flex items-center gap-2">
      <span>"Cut:"</span>
      <Kbd><Kbd.Abbr key_value=`command /> <Kbd.Content>"X"</Kbd.Content></Kbd>
      <Kbd variant=`light>
        <Kbd.Abbr key_value=`command /> <Kbd.Content>"X"</Kbd.Content>
      </Kbd>
    </div>
    <div class_="flex items-center gap-2">
      <span>"Undo:"</span>
      <Kbd><Kbd.Abbr key_value=`command /> <Kbd.Content>"Z"</Kbd.Content></Kbd>
      <Kbd variant=`light>
        <Kbd.Abbr key_value=`command /> <Kbd.Content>"Z"</Kbd.Content>
      </Kbd>
    </div>
    <div class_="flex items-center gap-2">
      <span>"Redo:"</span>
      <Kbd>
        <Kbd.Abbr key_value=`command />
        <Kbd.Abbr key_value=`shift />
        <Kbd.Content>"Z"</Kbd.Content>
      </Kbd>
      <Kbd variant=`light>
        <Kbd.Abbr key_value=`command />
        <Kbd.Abbr key_value=`shift />
        <Kbd.Content>"Z"</Kbd.Content>
      </Kbd>
    </div>
  </div>

Navigation Keys

Arrow Keys:

↑↓←→

Page Navigation:

⇞⇟↖↘

kbd_navigation.mlx

module Kbd = Solidtype_heroui.Kbd

let make () =
  <div class_="flex flex-col gap-4">
    <div class_="flex items-center gap-2">
      <span class_="text-sm text-muted">"Arrow Keys:"</span>
      <div class_="flex items-center gap-2">
        <Kbd><Kbd.Abbr key_value=`up /></Kbd>
        <Kbd><Kbd.Abbr key_value=`down /></Kbd>
        <Kbd><Kbd.Abbr key_value=`left /></Kbd>
        <Kbd><Kbd.Abbr key_value=`right /></Kbd>
      </div>
    </div>
    <div class_="flex items-center gap-2">
      <span class_="text-sm text-muted">"Page Navigation:"</span>
      <div class_="flex items-center gap-2">
        <Kbd><Kbd.Abbr key_value=`pageup /></Kbd>
        <Kbd><Kbd.Abbr key_value=`pagedown /></Kbd>
        <Kbd><Kbd.Abbr key_value=`home /></Kbd>
        <Kbd><Kbd.Abbr key_value=`end_ /></Kbd>
      </div>
    </div>
  </div>

Inline Usage

Press Esc to close the dialog.

Use ⌘K to open the command palette.

Navigate with ↑ and ↓ arrow keys.

Save your work with ⌘S regularly.

kbd_inline.mlx

module Kbd = Solidtype_heroui.Kbd

let make () =
  <div class_="space-y-4">
    <p class_="text-sm">
      "Press "
      <Kbd><Kbd.Content>"Esc"</Kbd.Content></Kbd>
      " to close the dialog."
    </p>
    <p class_="text-sm">
      "Use "
      <Kbd><Kbd.Abbr key_value=`command /> <Kbd.Content>"K"</Kbd.Content></Kbd>
      " to open the command palette."
    </p>
    <p class_="text-sm">
      "Navigate with "
      <Kbd><Kbd.Abbr key_value=`up /></Kbd>
      " and "
      <Kbd><Kbd.Abbr key_value=`down /></Kbd>
      " arrow keys."
    </p>
    <p class_="text-sm">
      "Save your work with "
      <Kbd><Kbd.Abbr key_value=`command /> <Kbd.Content>"S"</Kbd.Content></Kbd>
      " regularly."
    </p>
  </div>

Special Keys

Press ↵ to confirm or ⎋ to cancel.

Use ⇥ to navigate between form fields and ⇧⇥ to go back.

Hold ␣ to temporarily enable panning mode.

kbd_special.mlx

module Kbd = Solidtype_heroui.Kbd

let make () =
  <div class_="space-y-3">
    <p class_="text-sm">
      "Press "
      <Kbd><Kbd.Abbr key_value=`enter /></Kbd>
      " to confirm or "
      <Kbd><Kbd.Abbr key_value=`escape /></Kbd>
      " to cancel."
    </p>
    <p class_="text-sm">
      "Use "
      <Kbd><Kbd.Abbr key_value=`tab /></Kbd>
      " to navigate between form fields and "
      <Kbd><Kbd.Abbr key_value=`shift /> <Kbd.Abbr key_value=`tab /></Kbd>
      " to go back."
    </p>
    <p class_="text-sm">
      "Hold "
      <Kbd><Kbd.Abbr key_value=`space /></Kbd>
      " to temporarily enable panning mode."
    </p>
  </div>

Customization

Tailwind CSS

class_ is added after HeroUI’s classes, on the key and on each part.

⌘K⇧P

kbd_tailwind.mlx

module Kbd = Solidtype_heroui.Kbd

let make () =
  <div class_="flex items-center gap-3">
    <Kbd class_="rounded-lg bg-accent-soft px-2.5 text-accent-soft-foreground">
      <Kbd.Abbr key_value=`command /> <Kbd.Content>"K"</Kbd.Content>
    </Kbd>
    <Kbd class_="rounded-lg bg-default px-2.5 text-muted">
      <Kbd.Abbr key_value=`shift /> <Kbd.Content>"P"</Kbd.Content>
    </Kbd>
  </div>

Global CSS

HeroUI’s classes are global, so a stylesheet restyles every key, as with HeroUI in React:

@layer components {
  .kbd {
    @apply bg-gray-100 dark:bg-gray-800 border-gray-300;
  }

  .kbd__abbr {
    @apply font-bold;
  }

  .kbd__content {
    @apply text-sm;
  }
}

Styling Reference

CSS Classes

• .kbd, and its variants .kbd--default, .kbd--light
• .kbd__abbr, .kbd__content

API Reference

Each prop beside the name HeroUI’s React component gives it.

Kbd

React	solidtype	Type	Default	Description
variant	variant	[ `default | `light ]		Its look
className	class_	string		Added after HeroUI’s classes
children	children	elements		Its symbols and text

Kbd.Abbr

React	solidtype	Type	Description
keyValue	key_value	Kbd.key	The key whose symbol it draws
className	class_	string	Added after HeroUI’s class

Kbd.Content

React	solidtype	Type	Description
className	class_	string	Added after HeroUI’s class
children	children	elements	The key’s text

Kbd.key

Each key, the name React gives it, and its symbol and title:

solidtype	React	Drawn
`command	"command"	⌘ Command
`shift	"shift"	⇧ Shift
`ctrl	"ctrl"	⌃ Control
`option	"option"	⌥ Option
`enter	"enter"	↵ Enter
`delete	"delete"	⌫ Delete
`escape	"escape"	⎋ Escape
`tab	"tab"	⇥ Tab
`capslock	"capslock"	⇪ Caps Lock
`up	"up"	↑ Up
`right	"right"	→ Right
`down	"down"	↓ Down
`left	"left"	← Left
`pageup	"pageup"	⇞ Page Up
`pagedown	"pagedown"	⇟ Page Down
`home	"home"	↖ Home
`end_	"end"	↘ End
`help	"help"	? Help
`space	"space"	␣ Space
`fn	"fn"	Fn Fn
`win	"win"	⌘ Win
`alt	"alt"	⌥ Alt

Beside React

Original HeroUI documentation: Kbd.

The same HeroUI Kbd twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two keys: a marked row is one they disagree on.

solidtype — OCaml, on Solid and Kobalte

⌘K

React — TypeScript, on React Aria

attribute	solidtype	React