Shortcut

Renders key glyphs such as ⌘K. While it is mounted, pressing those keys clicks the button or link it sits in, or calls ontrigger.

K

<script lang="ts">
    import { Button } from '@sivir-ui/svelte/components/button';
    import Shortcut from '@sivir-ui/svelte/components/shortcut';
    import { toast } from '@sivir-ui/svelte/components/toast';

    function ontrigger() {
        toast({
            title: 'Shortcut activated',
            description: 'Pressed K',
            duration: 2000,
            type: 'success'
        });
    }
</script>

<div class="flex flex-wrap items-center justify-center gap-3">
    <Button variant="ghost">
        Cancel
        <Shortcut shortcut="esc" />
    </Button>
    <Button>
        Save
        <Shortcut shortcut="enter" />
    </Button>
    <Shortcut shortcut="K" {ontrigger} />
</div>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add shortcut

Usage

Join keys with +, as in ctrl+shift+P. cmd matches the Meta key only; use ctrl for Control. A Shortcut outside a button or link without ontrigger only displays. Keys typed into a field are ignored, except Enter and Escape in an input. A Shortcut inside an overlay that another overlay covers does not fire. The chip is hidden below the sm breakpoint, but the binding stays active.

import { Button } from '@sivir-ui/svelte/components/button';
import Shortcut from '@sivir-ui/svelte/components/shortcut';

<Button onclick={save}>
  Save
  <Shortcut shortcut="cmd+S" />
</Button>

<Shortcut shortcut="ctrl+K" ontrigger={openSearch} />

Examples

Basic

K

<script lang="ts">
    import Shortcut from '@sivir-ui/svelte/components/shortcut';
</script>

<Shortcut shortcut="K" />

With modifiers

⌘K ⇧/

<script lang="ts">
    import Shortcut from '@sivir-ui/svelte/components/shortcut';
</script>

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

In context

<script lang="ts">
    import { Button } from '@sivir-ui/svelte/components/button';
    import Shortcut from '@sivir-ui/svelte/components/shortcut';
</script>

<Button variant="outline">
    Open command menu
    <Shortcut shortcut="cmd+K" />
</Button>

Anatomy

Shortcut - Displays a keyboard shortcut and clicks its owner when pressed.