# Kbd

Source: https://lumeo.nativ.sh/components/kbd

# Kbd

Display keyboard shortcuts and register global hotkeys.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Kbd />

## When to Use

-   Displaying keyboard shortcuts in menus, tooltips, or documentation
-   Documenting keybindings in help pages or onboarding guides
-   Registering global hotkeys for power-user workflows

Preview Code

Default

Ctrl + K

Ctrl + Shift + P

Esc Enter

Preview Code

Sizes

Small: Ctrl + S

Default: Ctrl + S

Large: Ctrl + S

Preview Code

In Context

Open command palette

Ctrl + K

Search

Ctrl + F

Save

Ctrl + S

Close Esc

Preview Code

Size — interactive

Pick a size to see it applied live.

SmMdLg

Ctrl + K

Preview Code

Keyboard Shortcut Service

##### Try it!

Press Ctrl + K to trigger the shortcut counter.

Ctrl + K

triggered 0 time(s) Reset

## API Reference

### Kbd

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Key label text (e.g. "Ctrl", "K").

Size

KbdSize

Default

Size of the keyboard key. Values: Sm, Default, Lg.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### KeyboardShortcutService

Method

Signature

Description

RegisterAsync

RegisterAsync(keys, callback)

Registers a keyboard shortcut. Returns IAsyncDisposable to unregister.

## Related Components

-   [Badge](/components/badge) — For labeling and categorizing items with small inline indicators
-   [Tooltip](/components/tooltip) — For showing shortcut hints alongside action descriptions on hover