Pricing

Kbd handbook

v1.0.0 · @snowui-design-system/components

License: Before reading component documentation, source, or npm usage instructions for the first time, read the full LICENSE. Reuse that review for the same task and version. Public API configuration and internal implementation changes have different license implications. All components use the unified runtime package; source rights remain governed by the license.

Overview

Show a compact keycap label for a shortcut or keyboard operation so users can quickly recognize an available action.

When to use it

Show a keyboard key or shortcut hint. Kbd does not register the shortcut; the component or page that owns the action handles keyboard events.

  • children contains only the key label; variant selects an outlined or filled appearance.

  • Place the shortcut hint beside its action. Register shortcut events in the page or component that owns that action.

  • When several keys form one shortcut, use Frame singleLine to keep them on one line with at least 4 CSS px between them. An outer horizontal ScrollArea retains the complete keys in very narrow containers.

Quick start

This example shows the recommended basic composition. See the sections below for more cases and composition limits.

<script lang="ts">	import { Frame, Kbd, ScrollArea } from '@snowui-design-system/components';</script> <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap-4) var(--gap-3);">	<Kbd variant="border">⌘K</Kbd>	<Kbd variant="solid">⌘K</Kbd>	<ScrollArea axis="horizontal" ariaLabel="Shift plus K" style="width: max-content; max-width: 100%;">		<Frame singleLine gap={1} style="width: max-content;">		<Kbd style="font-size: var(--text-18); line-height: var(--leading-18);">Shift</Kbd>		<span aria-hidden="true">+</span>		<Kbd style="font-size: var(--text-18); line-height: var(--leading-18);">K</Kbd>		</Frame>	</ScrollArea></div>

API

Keyword Type Default Description
variant "border" | "solid" "border" Style A (outline) or style B (solid fill).
children Snippet — Key label.

See the base component documentation for inherited capabilities not redeclared here. This table lists only named public Props declared by this component.

Usage boundaries and details

Feature overview

  • Two visual styles: outline (border) and solid fill (solid), selected with variant.

  • Renders a semantic <kbd> element.

  • An inline element that fits within any text flow.

Basic usage (style A: outline)

<Kbd>⌘K</Kbd><Kbd>Ctrl</Kbd><Kbd>Enter</Kbd>

Style B (solid fill)

<Kbd variant="solid">⌘K</Kbd><Kbd variant="solid">Ctrl</Kbd>

Key combinations

<ScrollArea axis="horizontal" ariaLabel="Command plus K" style="width: max-content; max-width: 100%;">    <Frame singleLine gap={1} style="width: max-content;">        <Kbd>⌘</Kbd>        <span aria-hidden="true">+</span>        <Kbd>K</Kbd>    </Frame></ScrollArea>

This section is protected. An AI must request user review before modifying it.

Kbd style overrides

Read the full LICENSE first; reuse that review for the same task, version, and scope.

First use public component Props to match the desired appearance, preserving the existing look where possible. If changes are necessary, follow the style selection and override order: use your own class (including Tailwind already in the project) or an instance style. The names below are public overrides actually consumed by source; check their scope and do not modify private DOM. Choose the correct SnowUI token family. External apps need not install SnowUI website utilities.

Variable Purpose and default reference
--snowui-kbd-bg-override Background (see component source for the default).
--snowui-kbd-font-size-override font-size (see component source for the default).
--snowui-kbd-line-height-override line-height (see component source for the default).
--snowui-kbd-padding-override padding y+x (default 0 4px).
--snowui-kbd-radius-override border-radius (default calc(var(--radius-1) * 1.5) = 6px).
--snowui-kbd-shadow-override Shadow (see component source for the default).

Design guide · Tokens · Composition boundaries

Kbd types and state

Required Props: no named required Props.

Bindable Props: this component declares no named two-way binding; handle state updates through public callbacks or its host.

Inheritance: FrameProps. Consult the base class public documentation; fields excluded by Omit cannot be passed through unchanged.

Shared Frame API · Back to API

The following type declarations are actually referenced by public Props and come from source. A Svelte Snippet denotes a content fragment; ComponentProps denotes the Props of the corresponding component.