Display

Kbd

Shows a key or a shortcut, with the right symbols on Apple devices and the right names elsewhere.

Installation

npx sinaui add kbd

Copy src/lib/ui/Kbd.svelte, announce.ts and tokens.css. No other dependencies.

Examples

Shortcuts

mod is ⌘ on Apple devices and Ctrl elsewhere. Try pressing them: keys light up while held.

Search: Command+K ⌘K
Save to reading list: Command+S ⌘S
Next page: Right arrow →
Previous page: Left arrow ←
Open in a new tab: Command+Return ⌘↵
Undo: Command+Z ⌘Z
Redo: Command+Shift+Z ⌘⇧Z

<script lang="ts">
	import Kbd from '#lib/ui/Kbd.svelte';

	const shortcuts = [
		{ does: 'Search', keys: ['mod', 'K'] },
		{ does: 'Save to reading list', keys: ['mod', 'S'] },
		{ does: 'Next page', keys: ['right'] },
		{ does: 'Previous page', keys: ['left'] },
		{ does: 'Open in a new tab', keys: ['mod', 'enter'] },
		{ does: 'Undo', keys: ['mod', 'Z'] },
		{ does: 'Redo', keys: ['mod', 'shift', 'Z'] }
	];
</script>

<dl>
	{#each shortcuts as s (s.does)}
		<div class="row">
			<dt>{s.does}</dt>
			<dd><Kbd keys={s.keys} /></dd>
		</div>
	{/each}
</dl>

<style>
	dl {
		display: grid;
		gap: 0.25rem;
		inline-size: min(100%, 22rem);
		margin: 0;
	}
	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		min-block-size: 2rem;
	}
	dd {
		margin: 0;
	}
</style>

In a sentence

Press Command+K ⌘K to search the catalog, and Esc to close it.

<script lang="ts">
	import Kbd from '#lib/ui/Kbd.svelte';
</script>

<p>
	Press <Kbd keys={['mod', 'K']} /> to search the catalog, and <Kbd>Esc</Kbd> to close it.
</p>

<style>
	p {
		margin: 0;
	}
</style>

Props

Prop	Type	Default
`keys`	`string[]`: `mod`, `ctrl`, `shift`, `alt`, `enter`, `esc`, `backspace`, `tab`, arrows (`up`…), or any key
`children`	`Snippet`: a single key written out

Accessibility

Symbols are read by name: ⌘K is read “Command+K”, not “place of interest sign K”.
Only shows keys: it does not bind them. Add the shortcut yourself, and say so with aria-keyshortcuts on the control it triggers.