Kbd
A key cap — the <kbd> a shortcut is drawn with.
Walkthrough
1. Basic
keys="mod+k" draws the whole combo — ⌘ K on a Mac, Ctrl + K elsewhere — and each symbol is read by its name. Children draw a single cap.
Search anywhere with Control+ K.
Send with Control+ Enter, new line with Shift+ Enter.
Close with Esc.
<script lang="ts"> import { Kbd, Text } from 'omaris';</script><div class="flex flex-col items-start gap-3"> <Text variant="body-md">Search anywhere with <Kbd keys="mod+k" />.</Text> <Text variant="body-md"> Send with <Kbd keys="mod+enter" size="sm" />, new line with <Kbd keys="shift+enter" size="sm" />. </Text> <Text variant="body-md">Close with <Kbd>Esc</Kbd>.</Text></div>2. Shortcut sheet
A shortcut sheet. platform pins a keyboard for a comparison like this one; left on auto, the reader's own keyboard is the one drawn.
- Open the command palette
- Command K
- New issue
- C
- Toggle the sidebar
- Command B
- Go to settings
- Command ,
- Every shortcut
- Shift /
<script lang="ts"> import { Kbd, SegmentedButton, Text } from 'omaris'; const SHORTCUTS = [ { action: 'Open the command palette', keys: 'mod+k' }, { action: 'New issue', keys: 'c' }, { action: 'Toggle the sidebar', keys: 'mod+b' }, { action: 'Go to settings', keys: 'mod+,' }, { action: 'Every shortcut', keys: 'shift+/' } ]; let platform = $state('apple');</script><div class="flex w-full max-w-md flex-col gap-3"> <SegmentedButton bind:value={platform} label="Keyboard" items={[ { value: 'apple', label: 'Mac' }, { value: 'other', label: 'Windows' } ]} /> <dl class="divide-y divide-border rounded-shape-md border border-border"> {#each SHORTCUTS as shortcut (shortcut.keys)} <div class="flex items-center justify-between gap-4 px-4 py-2.5"> <Text as="dt" variant="body-md">{shortcut.action}</Text> <dd> <Kbd keys={shortcut.keys} platform={platform === 'apple' ? 'apple' : 'other'} size="sm" /> </dd> </div> {/each} </dl></div>3. Overridden
classes reaches the caps, the row and the separator; separator replaces the +; and a title or aria-* the caller sets lands on the root.
Shift· Control· P Command K Space
<script lang="ts"> import { Kbd, formatShortcut } from 'omaris';</script><div class="flex flex-wrap items-center gap-4"> <Kbd keys="mod+shift+p" platform="other" separator="·" classes={{ separator: 'px-0.5 text-primary' }} /> <Kbd keys="mod+k" platform="apple" title={formatShortcut('mod+k', { platform: 'apple' })} classes={{ root: 'gap-0', key: 'rounded-none border-primary bg-primary-container text-primary-container-foreground first:rounded-s-shape-sm last:rounded-e-shape-sm' }} /> <Kbd variant="flat" class="rounded-full px-3">Space</Kbd></div>