mielui
Status and content

Kbd

A key chip for keyboard shortcuts, including inside buttons.

Installation

pnpm dlx @mielui/svelte add kbd

Usage

Pass a shortcut such as cmd+K. The chip shows Mac menu symbols and its accessible name spells the keys out. cmd always means Meta and ctrl always means Control, on every platform. The chip is hidden below the sm breakpoint, where there is usually no keyboard.

A shortcut is any modifiers plus one key: a single character, or enter, esc, tab, space, up, down, left, right, backspace, delete, or plus. Other key names are not parsed, so the chip renders empty and nothing is registered; pass children to label such a key yourself.

Inside an enabled button or link, pressing the shortcut activates that control. Elsewhere, pass ontrigger to run your own handler. Shortcuts ignore keys typed into a text field (except enter and esc from an input), repeated and composing key events, and events another handler already consumed. Hidden or inert controls do not activate, and an open overlay limits shortcuts to its own controls.

<script lang="ts">
    import Kbd from '@mielui/svelte/components/kbd';
</script>

<Kbd shortcut="cmd+K" />

Examples

Shortcuts in buttons

Each chip names the key that runs its button. The lone chip calls its own handler.

Basic

Modifiers

In a button

Labels

Pass labels to translate the key names in the chip's accessible name, such as command, shift, enter, or up. The symbols on the chip stay the same, and single characters are read as written. Every key of KbdLabels is optional; omitted keys keep the English name.

<script lang="ts">
    import Kbd, { type KbdLabels } from '@mielui/svelte/components/kbd';

    const labels: KbdLabels = {
        command: 'Commande',
        shift: 'Majuscule',
        enter: 'Entrée'
    };
</script>

<Kbd shortcut="cmd+shift+enter" {labels} />

API reference

Kbd

Displays a keyboard shortcut.

  • children
    Snippet<[]>

    Content rendered inside.

  • shortcut Required
    string

    Keys to show, such as cmd+K. With ontrigger it also listens for them.

    Default ''

  • ontrigger
    ((event: KeyboardEvent) => void)

    Called when the shortcut is pressed.

  • labels
    KbdLabels

    Overrides the built-in text and accessible names. Every key is optional and English is the fallback.