KBD

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

TabShiftSpaceCtrlCommandAltOptionEnterBackspaceEscDeleteUpDownLeftRightCaps Lock

Usage Example

@kbd.Kbd(kbd.Config{Text: "Tab"})
@kbd.Kbd(kbd.Config{Text: "Shift"})
@kbd.Kbd(kbd.Config{Text: "Space"})
@kbd.Kbd(kbd.Config{Text: "Ctrl"})

Keys With Icons

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

Command Shift Option Control Tab Up Down Left Right

Keys With Icons

@kbd.Kbd(kbd.Config{Icon: commandKeyIcon(), Label: "Command"})
@kbd.Kbd(kbd.Config{Icon: shiftKeyIcon(), Label: "Shift"})
@kbd.Kbd(kbd.Config{Icon: upKeyIcon(), Label: "Up"})

Within Text

Use KBD inline when prose references a key or shortcut.

To Tab or to Space, that is the question.

Within Text

<p>
    To @kbd.Kbd(kbd.Config{Text: "Tab", Size: kbd.SizeSM}) or to @kbd.Kbd(kbd.Config{Text: "Space", Size: kbd.SizeSM}), that's the question.
</p>

Alphabet Keys

Letter keys wrap cleanly for shortcut maps and keyboard legends.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Alphabet Keys

for _, key := range []string{"A", "B", "C"} {
    @kbd.Kbd(kbd.Config{Text: key})
}

Number Keys

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

1234567890

Number Keys

for _, key := range []string{"1", "2", "3"} {
    @kbd.Kbd(kbd.Config{Text: key})
}

Function Keys

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

F1F2F3F4F5F6F7F8F10F11F12

Function Keys

@kbd.Kbd(kbd.Config{Text: "F1"})
@kbd.Kbd(kbd.Config{Text: "F12"})

Sizes

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

Size

xs sm md lg

Esc

Sizes

@kbd.Kbd(kbd.Config{Text: "Esc", Size: kbd.SizeMD})

API Reference

Prop	Type	Default	Description
`Text`	`string`	`""`	Visible key text.
`Label`	`string`	`""`	Accessible label, especially useful for icon-only keys.
`Size`	`Size`	`SizeMD`	Size: "xs", "sm", "md", "lg".
`Icon`	`templ.Component`	`nil`	Optional leading or icon-only key glyph.
`Class`	`string`	`""`	Extra classes on the kbd element.
`Attrs`	`templ.Attributes`	`nil`	Additional attributes on the kbd element.

Dependencies Table