Skip to content
Gx
GitHub

Kbd

A key or key combination.

Open the preview in a new tab 

<kbd.Kbd>K</kbd.Kbd>

Installation

Run the command in the app module.

Terminal
gx add kbd

The command writes these files.

File Path in the app
Kbd.gx ui/kbd/Kbd.gx
Kbd.fixtures.go ui/kbd/Kbd.fixtures.go
KbdGroup.gx ui/kbd/KbdGroup.gx
KbdGroup.fixtures.go ui/kbd/KbdGroup.fixtures.go

Copy each file to its path in the app. Change each import of a registry package to the path of that package in the app.

ui/kbd/Kbd.gx
package kbd

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the key text.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<kbd data-slot="kbd" class={gx.Cx("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-foreground select-none [&_svg:not([class*='size-'])]:size-3 [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10", p.Class)} {...p.Attrs}>{p.Children}</kbd>
ui/kbd/Kbd.fixtures.go
package kbd

import "github.com/alternayte/gx"

var KbdFixtures = gx.Fixtures[KbdProps]{
	"Key":   {Children: gx.Text("K")},
	"Combo": {Children: gx.Text("Ctrl")},
}
ui/kbd/KbdGroup.gx
package kbd

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the keys of the group.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<kbd data-slot="kbd-group" class={gx.Cx("inline-flex items-center gap-1", p.Class)} {...p.Attrs}>{p.Children}</kbd>
ui/kbd/KbdGroup.fixtures.go
package kbd

import "github.com/alternayte/gx"

var KbdGroupFixtures = gx.Fixtures[KbdGroupProps]{
	"Shortcut": {Children: gx.Frag(
		Kbd(KbdProps{Children: gx.Text("Ctrl")}),
		gx.El("span", nil, gx.Text("+")),
		Kbd(KbdProps{Children: gx.Text("K")}),
	)},
}

The theme must define these tokens: --muted, --foreground, --background.

Usage

A key or a key combination.

<kbd.Kbd>Esc</kbd.Kbd>

<kbd.KbdGroup>
  <kbd.Kbd>Ctrl</kbd.Kbd>
  <span>+</span>
  <kbd.Kbd>K</kbd.Kbd>
</kbd.KbdGroup>

KbdGroup keeps the keys of one shortcut on one line.

Examples

Kbd: Key

Open the preview in a new tab 

<kbd.Kbd>K</kbd.Kbd>

Kbd: Combo

Open the preview in a new tab 

<kbd.Kbd>Ctrl</kbd.Kbd>

KbdGroup: Shortcut

Open the preview in a new tab 

<kbd.KbdGroup>
  <kbd.Kbd>Ctrl</kbd.Kbd>
  <span>+</span>
  <kbd.Kbd>K</kbd.Kbd>
</kbd.KbdGroup>

API reference

A tag sets a prop by its name with a lower-case first letter: Class is class.

kbd.Kbd

Prop Type Default Description
Class string "" Class adds classes to the root element.
Children gx.Node Required Children is the key text.
Attrs gx.Attrs nil Attrs adds HTML attributes to the root element.

kbd.KbdGroup

Prop Type Default Description
Class string "" Class adds classes to the root element.
Children gx.Node Required Children is the keys of the group.
Attrs gx.Attrs nil Attrs adds HTML attributes to the root element.

Do and do not

Do

  • Write the key as it is printed on the keyboard.
  • Put one key in one Kbd.

Don't

  • Do not use a kbd for a button. It does not take a click.
  • Do not put a sentence in a kbd.

Keyboard

Key Action
None The component is static.