> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# KBD

> KBD displays keyboard shortcut indicators that give users quick access to frequently used actions or commands, improving efficiency and streamlining workflows.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-kbd--docs)

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-kbd--default" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-kbd--default&viewMode=story&globals=theme:light" title="KBD default story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

## When to use

* To accelerate common tasks for power users.
* When an action is frequently repeated and benefits from faster execution.
* To complement menu items and Buttons by offering an alternative input method.

## When to use something else

* For critical actions without clear undo (e.g., delete all), unless safeguarded by confirmation—prefer explicit [Button](/cdf/aura/primitives/button) or [Dialog](/cdf/aura/primitives/dialog) flows.
* As the only means of accessing an action; always provide a visible control ([Button](/cdf/aura/primitives/button), [Menu](/cdf/aura/primitives/dropdown-menu) item).
* Where discoverability matters and users won't learn shortcuts.
* When key chords would conflict with the browser, OS, or assistive tech.

## Dos and don'ts

* **Do** use letters for meaning. Letters make shortcuts more memorable, as they can convey meaning (e.g., C for Comments).
* **Do** always use modifiers (e.g., ⌘, Ctrl) with letters to prevent accidental triggers and to avoid overriding focus states.
* **Do** show shortcuts next to the action they trigger, e.g., inside Menus, Dialogs, or Tooltips.
* **Do** be selective: Not every action needs a shortcut. Consider how often users perform the action and where its trigger point is in the UI.
* **Do** respect browser and OS default shortcuts to avoid confusion and conflicts.
* **Do** use the same shortcut for the same action across product.
* **Don't** use two-letter shortcuts: Two-letter shortcuts can conflict with single-letter ones.
* **Don't** assign multiple shortcuts to a single action.

## Behavior

* Shortcuts should trigger immediate actions with minimal delay.
* Consider removing Shortcut keys in mobile and tablet settings as these cannot be triggered and only take up valuable space for content.

## Often used with

[Menu](/cdf/aura/primitives/dropdown-menu) item labels, [Button](/cdf/aura/primitives/button) or [Tooltip](/cdf/aura/primitives/tooltip) hints, command palette ([Command](/cdf/aura/primitives/command)) results, in-app docs.

## Accessibility

* **Clarify parent component names:** When placing `<Kbd>` inside a [Button](/cdf/aura/primitives/button) or [Input](/cdf/aura/primitives/input) (for example, a search trigger with ⌘K), text concatenation can sound confusing. Either set an explicit `aria-label` on the parent button (for example, `aria-label="Search, shortcut Command K"`) or hide decorative key badges with `aria-hidden="true"` if the shortcut is already explained in context.
* **Avoid direct interactivity:** Do not attach `onClick` listeners or interactive roles directly to a `<Kbd>` element. If a shortcut indicator needs to be clicked, wrap the `<Kbd>` inside a native `<button>`.
* **Separate multi-key sequences:** When using `<KbdGroup>` for combinations (for example, Ctrl + Shift + P), ensure visual separator symbols (like `+`) are included or articulated in accessible labels so screen readers don't read the combination as a single run-on string.
* **Enforce 4.5:1 contrast ratios:** Aura's default `<Kbd>` uses scaled-down typography (`text-xs`) and muted background fills. Ensure custom color overrides maintain a 4.5:1 contrast ratio for key text and a 3:1 ratio for key borders against the page background.
* **Provide dynamic OS keys:** Render platform-appropriate keys (⌘ for macOS vs Ctrl for Windows/Linux) dynamically to avoid delivering inaccurate keyboard guidance to screen reader users and keyboard navigators.

## Visual examples

The examples below are interactive and follow the doc site's theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

### Common shortcuts

Display familiar modifier-plus-key combinations next to menu items or buttons so power users can discover shortcuts for frequent actions.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-kbd--common-shortcuts" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-kbd--common-shortcuts&viewMode=story&globals=theme:light" title="KBD common shortcuts story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Single keys

Show a single key when the shortcut is unambiguous in context—for example, arrow keys in a list or Enter to confirm an inline edit.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-kbd--single-keys" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-kbd--single-keys&viewMode=story&globals=theme:light" title="KBD single keys story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Disabled

Use a disabled KBD display when a shortcut is unavailable in the current state, paired with a tooltip that explains why.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-kbd--disabled" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-kbd--disabled&viewMode=story&globals=theme:light" title="KBD disabled story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With icons

Combine key labels with icons when the shortcut triggers an action that already has a recognizable visual metaphor in your UI.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-kbd--with-icons" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-kbd--with-icons&viewMode=story&globals=theme:light" title="KBD with icons story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Multi key combinations

Show multi-key chords for actions that require modifiers, reducing accidental triggers and matching platform conventions like Ctrl+C or ⌘K.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-kbd--multi-key-combinations" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-kbd--multi-key-combinations&viewMode=story&globals=theme:light" title="KBD multi key combinations story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Key groups

Group related keys visually when a shortcut spans multiple presses in sequence, such as G then D for "go to dashboard."

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-kbd--key-groups" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-kbd--key-groups&viewMode=story&globals=theme:light" title="KBD key groups story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### In context

Place KBD elements inline with the action they trigger—in menus, toolbars, or command palettes—so users connect the keys to the outcome.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-kbd--in-context" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-kbd--in-context&viewMode=story&globals=theme:light" title="KBD in context story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Shortcut list

Use a shortcut list in help panels or onboarding to teach power-user workflows without cluttering the primary interface.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-kbd--shortcut-list" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-kbd--shortcut-list&viewMode=story&globals=theme:light" title="KBD shortcut list story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Function keys

Display function keys for actions mapped to F1–F12, common in desktop-style applications or specialized operator interfaces.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-kbd--function-keys" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-kbd--function-keys&viewMode=story&globals=theme:light" title="KBD function keys story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>