Studio
2

Kbd

Installation

pnpm dlx @mielui/svelte add kbd

Usage

Pass a shortcut string such as cmd+K. The visible chip uses Mac menu symbols, while its accessible name spells out the keys. Command means Meta and Control means Control on every platform.

An active shortcut runs its enclosing enabled button or link, or ontrigger when supplied.

Executable shortcuts ignore consumed, repeated, and composing key events. Shortcuts in hidden or inert controls do not activate, and an active overlay limits activation to its own controls.

Import Kbd and pass a keyboard shortcut string:

import Kbd from '$lib/mielui/components/kbd';

<Kbd shortcut="cmd+K" />
<Kbd shortcut="shift+/" />

Examples

Basic

With modifiers

In context

API reference

Kbd

Displays a keyboard shortcut.

Prop Type Default
children Snippet<[]> | undefined —
shortcut Required string ''
ontrigger ((event: KeyboardEvent) => void) | undefined —