Skip to content

KBD

Display keyboard shortcuts and user input hints with semantic <kbd> markup.

Default Rendered example
TabShiftSpaceCtrlCommandAltOptionEnterBackspaceEscDeleteUpDownLeftRightCaps Lock
Usage Example
@kbd.Kbd("Tab")
@kbd.Kbd("Shift")
@kbd.Kbd("Space")
@kbd.Kbd("Ctrl")

Keys With Icons

Render an icon-only key by passing Icon and Label.

Keys With Icons Rendered example
Command Shift Option Control Tab Up Down Left Right
Keys With Icons
@kbd.Kbd("", kbd.WithIcon(commandKeyIcon()), kbd.WithLabel("Command"))
@kbd.Kbd("", kbd.WithIcon(shiftKeyIcon()), kbd.WithLabel("Shift"))
@kbd.Kbd("", kbd.WithIcon(upKeyIcon()), kbd.WithLabel("Up"))

Within Text

Use KBD inline when prose references a key or shortcut.

Within Text Rendered example

To Tab or to Space, that is the question.

Within Text
<p>
    To @kbd.Kbd("Tab", kbd.WithSize(kbd.SizeSM)) or to @kbd.Kbd("Space", kbd.WithSize(kbd.SizeSM)), that's the question.
</p>

Alphabet Keys

Letter keys wrap cleanly for shortcut maps and keyboard legends.

Alphabet Keys Rendered example
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Alphabet Keys
for _, key := range []string{"A", "B", "C"} {
    @kbd.Kbd(key)
}

Number Keys

Number keys use the same fixed minimum dimensions as text keys.

Number Keys Rendered example
1234567890
Number Keys
for _, key := range []string{"1", "2", "3"} {
    @kbd.Kbd(key)
}

Function Keys

Function keys are compact while leaving room for two- and three-character labels.

Function Keys Rendered example
F1F2F3F4F5F6F7F8F10F11F12
Function Keys
@kbd.Kbd("F1")
@kbd.Kbd("F12")

Sizes

Four sizes are available: kbd.SizeXS, kbd.SizeSM, kbd.SizeMD, and kbd.SizeLG.

Sizes Rendered example
Esc
Esc
Esc
Esc
Sizes
@kbd.Kbd("Esc")

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/kbd
Open v0.2.7 API