# Kbd

Keyboard shortcut indicator. Activates its nearest interactive owner or an explicit ontrigger callback.

- Package: `@mielui/svelte`
- Component version: `1.2.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add kbd
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Kbd

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |
| shortcut | string | '' | Yes | No | Keys to show, such as `cmd+K`. With `ontrigger` it also listens for them. |
| ontrigger | ((event: KeyboardEvent) => void) \| undefined | - | No | No | Called when the shortcut is pressed. |
| labels | KbdLabels \| undefined | - | No | No | Overrides the built-in text and accessible names. Every key is optional and English is the fallback. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import Kbd from './kbd.svelte';

export type KbdLabels = {
    /** Spoken name of the Command key, written `cmd`, `command`, or `meta`. */
    command?: string;
    /** Spoken name of the Control key, written `ctrl` or `control`. */
    control?: string;
    /** Spoken name of the Shift key. */
    shift?: string;
    /** Spoken name of the Alt key, written `alt`. */
    alt?: string;
    /** Spoken name of the Option key, written `option` or `opt`. */
    option?: string;
    /** Spoken name of the Enter key, written `enter` or `return`. */
    enter?: string;
    /** Spoken name of the Escape key, written `esc` or `escape`. */
    escape?: string;
    /** Spoken name of the Tab key. */
    tab?: string;
    /** Spoken name of the Space key. */
    space?: string;
    /** Spoken name of the Backspace key. */
    backspace?: string;
    /** Spoken name of the Delete key. */
    delete?: string;
    /** Spoken name of the plus key, written `plus`. */
    plus?: string;
    /** Spoken name of the Up arrow key. */
    up?: string;
    /** Spoken name of the Down arrow key. */
    down?: string;
    /** Spoken name of the Left arrow key. */
    left?: string;
    /** Spoken name of the Right arrow key. */
    right?: string;
};

export type KbdProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
    /** Content rendered inside. */
    children?: Snippet;
    /** Keys to show, such as `cmd+K`. With `ontrigger` it also listens for them. */
    shortcut: string;
    /** Called when the shortcut is pressed. */
    ontrigger?: (event: KeyboardEvent) => void;
    /**
     * Overrides the built-in text and accessible names. Every key is optional and English is the
     * fallback.
     */
    labels?: KbdLabels;
};

export { Kbd };
export default Kbd;
~~~~

## Examples

### Basic

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

<Kbd shortcut="K" />
~~~~

### Context

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import Kbd from '@mielui/svelte/components/kbd';

    let saved = $state(false);

    function save() {
        saved = true;
    }
</script>

<div class="flex flex-col items-center gap-3">
    <Button variant="secondary" onclick={save}>
        Save draft
        <Kbd shortcut="alt+S" />
    </Button>
    <p role="status" class="text-sm text-foreground-muted">
        {saved ? 'Draft saved in this preview.' : 'Click Save draft or press Alt+S.'}
    </p>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import Kbd from '@mielui/svelte/components/kbd';

    let message = $state('Try a shortcut or choose an action.');

    function cancel() {
        message = 'Changes discarded in this preview.';
    }

    function save() {
        message = 'Draft saved in this preview.';
    }

    function ontrigger() {
        message = 'Pressed K. Shortcut activated in this preview.';
    }
</script>

<div class="flex flex-col items-center gap-4">
    <div class="flex flex-wrap items-center justify-center gap-3">
        <Button variant="ghost" onclick={cancel}>
            Cancel
            <Kbd shortcut="esc" />
        </Button>
        <Button onclick={save}>
            Save
            <Kbd shortcut="enter" />
        </Button>
        <Kbd shortcut="K" {ontrigger} />
    </div>

    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Modifiers

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

<div class="flex gap-2">
    <Kbd shortcut="cmd+K" />
    <Kbd shortcut="shift+/" />
</div>
~~~~

For the rendered reference, visit [/docs/components/kbd](/docs/components/kbd).