Kbd
Inline keystroke affordance. Renders a native `<kbd>` with a muted chip treatment; wrap a KbdGroup around chords or sequences.
Single key
⌘ Enter Esc Tab
kbd.svelte
<script lang="ts">
import { Kbd } from '$lib/components/ui/kbd';
</script>
<Kbd>⌘</Kbd>
<Kbd>Enter</Kbd>Chord
⌘ K Shift ? Ctrl Alt Del
kbd-chord.svelte
<script lang="ts">
import { Kbd, KbdGroup } from '$lib/components/ui/kbd';
</script>
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>Inline with copy
Press ⌘K to open the command palette, or ? for shortcuts.
kbd.svelte
<script lang="ts">
import { cn, type WithElementRef } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
</script>
<kbd
bind:this={ref}
data-slot="kbd"
class={cn(
"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
className
)}
{...restProps}
>
{@render children?.()}
</kbd>
Inside Button
Append a KbdGroup inside a Button to surface a keyboard shortcut hint directly on the control.
kbd-in-button.svelte
<script lang="ts">
import { Kbd, KbdGroup } from '$lib/components/ui/kbd';
import { Button } from '$lib/components/ui/button';
</script>
<Button variant="outline">
Search
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>
</Button>Inside Tooltip
Place a KbdGroup inside TooltipContent to show the shortcut only on hover — keeps the trigger clean.
kbd-in-tooltip.svelte
<script lang="ts">
import { Kbd, KbdGroup } from '$lib/components/ui/kbd';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '$lib/components/ui/tooltip';
import { Button } from '$lib/components/ui/button';
</script>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
{#snippet child({ props })}
<Button variant="ghost" size="icon" aria-label="Search" {...props}>⌕</Button>
{/snippet}
</TooltipTrigger>
<TooltipContent>
Search
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>
</TooltipContent>
</Tooltip>
</TooltipProvider>Inside Input Group
An inline-end addon containing Kbd signals the shortcut that opens or activates a search field.
kbd-in-input-group.svelte
<script lang="ts">
import { Kbd, KbdGroup } from '$lib/components/ui/kbd';
import { InputGroup, InputGroupAddon, InputGroupInput } from '$lib/components/ui/input-group';
import { Icon } from '$lib/components/ui/icon';
</script>
<InputGroup>
<InputGroupAddon>
<Icon name="search-line" size="1rem" class="mx-2 size-4 text-muted-foreground" />
</InputGroupAddon>
<InputGroupInput placeholder="Search…" />
<InputGroupAddon align="inline-end" class="pr-2">
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>
</InputGroupAddon>
</InputGroup>Kbd props
Both Kbd and KbdGroup accept every native HTML attribute via spread. Inside tooltips, Kbd inverts its surface automatically.
| Prop | Type | Default | Description |
|---|---|---|---|
string | — | Merged onto the root <kbd> via tailwind-merge. | |
HTMLElement | null | null | Two-way-bindable element reference. |