Kbd

A component for displaying keyboard shortcuts and key combinations.

Anatomy

<script>
  import { Kbd } from "@saas-ui/svelte/components/kbd";
</script>

<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>

<!-- With modifier keys -->
<Kbd keys={["command"]}>K</Kbd>

<!-- With colour -->
<Kbd colour="indigo" keys={["command"]}>K</Kbd>

<!-- With variants and sizes -->
<Kbd variant="raised" size="lg">Enter</Kbd>

Examples

Basic Accessibility

Basic Kbd component displaying a keyboard shortcut.

<Kbd>Shift + Tab</Kbd>

Colours Accessibility

Use the colour prop to change the colour of the Kbd component. Supports all standard colour palettes.

<VStack gap={2}>
	{#each colours as colour}
		<HStack gap={4} align="center">
			<Text size="xs" class="w-16">{colour}</Text>
			<Kbd {colour} variant="outline">Outline</Kbd>
			<Kbd {colour} variant="subtle">Subtle</Kbd>
			<Kbd {colour} variant="raised">Raised</Kbd>
			<Kbd {colour} variant="plain">Plain</Kbd>
		</HStack>
	{/each}
</VStack>

Combinations Accessibility

Render Kbd to showcase key combinations.

<HStack gap={1}>
	<Kbd>ctrl</Kbd>+<Kbd>shift</Kbd>+<Kbd>del</Kbd>
</HStack>

Function Keys Accessibility

Example of using Kbd to showcase function keys.

<HStack gap={2}>
	<Kbd aria-label="Command">⌘</Kbd>
	<Kbd aria-label="Option">⌥</Kbd>
	<Kbd aria-label="Shift">⇧</Kbd>
	<Kbd aria-label="Control">⌃</Kbd>
</HStack>

Modifier Keys Accessibility

Use the keys prop to display modifier key symbols. Supports command (⌘), option (⌥), shift (⇧), control (⌃), and more.

<VStack gap={4}>
	<HStack gap={2}>
		<Text size="sm" class="w-32">Command + K:</Text>
		<Kbd keys={["command"]}>K</Kbd>
	</HStack>
	<HStack gap={2}>
		<Text size="sm" class="w-32">Ctrl + Shift + P:</Text>
		<Kbd keys={["control", "shift"]}>P</Kbd>
	</HStack>
	<HStack gap={2}>
		<Text size="sm" class="w-32">Option + Enter:</Text>
		<Kbd keys={["option", "enter"]} />
	</HStack>
	<HStack gap={2}>
		<Text size="sm" class="w-32">Shift + Tab:</Text>
		<Kbd keys={["shift", "tab"]} />
	</HStack>
	<HStack gap={2}>
		<Text size="sm" class="w-32">Arrow keys:</Text>
		<Kbd keys={["up"]} />
		<Kbd keys={["down"]} />
		<Kbd keys={["left"]} />
		<Kbd keys={["right"]} />
	</HStack>
</VStack>

Sizes Accessibility

Use the size prop to change the size of the Kbd component.

<HStack gap={8} class="flex-wrap">
	{#each kbdSizes as size}
		<VStack gap={2} class="items-center">
			<Text size="xs">{size}</Text>
			<Kbd {size} variant="outline">Shift + Tab</Kbd>
		</VStack>
	{/each}
</HStack>

Variants Accessibility

Use the variant prop to change the appearance of the Kbd component.

<HStack gap={8} class="flex-wrap">
	{#each kbdVariants as variant}
		<VStack gap={2} class="items-center">
			<Text size="xs">{variant}</Text>
			<Kbd {variant}>Shift + Tab</Kbd>
		</VStack>
	{/each}
</HStack>

Within Text Accessibility

Use Kbd within text to highlight key combinations.

<Text>
	Press <Kbd>F12</Kbd> to open DevTools
</Text>

Props

Prop	Type	Default	Description
`variant`	`raised \| outline \| subtle \| plain`	`subtle`	The visual style of the component.
`size`	`sm \| md \| lg`	`md`	The size of the component.
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`gray`	The colour theme of the component.
`keys`	`object`	-	Modifier keys to display (e.g., ['command', 'shift']). Supported: command, option, shift, control, enter, backspace, delete, escape, tab, arrow keys.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.