> ## 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.

# Command

> A keyboard-first search interface for finding and executing actions, navigating to pages, or looking up content across the application. Typically triggered by a keyboard shortcut (⌘K / Ctrl+K) and rendered inside a Dialog or Popover.

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

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

## When to use

* A power-user shortcut to access actions or destinations without navigating manually.
* Applications with a large number of actions or pages that would be impractical to surface all at once.
* When you want to support keyboard-driven workflows across the whole app.

## When not to use

* Filtering a specific list or dataset on the page — use dedicated page [Search](/cdf/aura/primitives/search).
* Selecting from a known set of options in a form — use [Combobox](/cdf/aura/primitives/combobox) or [Select](/cdf/aura/primitives/select).
* Simple navigation between a small number of pages — use [Tabs](/cdf/aura/primitives/tabs) or nav links.

## Dos and don'ts

* **Do** group results into categories (actions, pages, recent, etc.) an ungrouped flat list becomes hard to scan quickly.
* **Do** use action verbs for command labels ("Open settings", "Create asset", "Switch to dark mode").
* **Do** show the keyboard shortcut on whatever triggers the command menu.
* **Do** show a meaningful empty state when no results match — "No results for..." is more helpful than a blank panel.
* **Do** show a loading state rather than leaving the list empty while fetching if results load asynchronously.
* **Do** show recent or frequently used items surfaced by default as they make the primitive significantly more useful.
* **Don't** include destructive actions without a confirmation step after selection.

## Often used with

Host surface uses ([Dialog](/cdf/aura/primitives/dialog) or [Popover](/cdf/aura/primitives/popover)), [Search](/cdf/aura/primitives/search), result list with sections; [KBD](/cdf/aura/primitives/kbd) chord to open; optional [Empty state](/cdf/aura/primitives/empty-state) when no matches.

## Accessibility

### Input and trigger labeling

* Input accessible name: `<CommandInput>` does not render an internal `<label>`. Pass an `aria-label` (e.g., `aria-label="Search settings and actions"`) or `aria-labelledby` directly to the input element so screen readers announce its purpose upon focus.
* Accessible launcher: If the command palette is toggled via a global keybinding (e.g., ⌘K), provide an accessible, focusable button in your page layout (e.g., a header search button) so screen reader and keyboard-only users can trigger it without knowing the shortcut.

### Modal context (CommandDialog)

* Accessible dialog title: When using `<CommandDialog>`, ensure a `<DialogTitle>` node is included. If you want a visual-only search bar without a header title, wrap `<DialogTitle>` in a visually hidden utility class (`sr-only`) so screen readers still announce the modal's name upon open.

### Keyboard shortcuts (CommandShortcut)

* Screen reader pronunciation: Visual shortcut glyphs (e.g., ⌘K or ⌥P) inside `<CommandShortcut>` are often skipped or read awkwardly by screen readers (e.g., "place of interest sign K"). Hide visual shortcut badges using `aria-hidden="true"` and provide accessible alternative text:

```tsx theme={"languages":{"custom":["/_languages/kuiper.json","../_languages/kuiper.json"]}}
<CommandShortcut aria-hidden="true">⌘K</CommandShortcut>
<span className="sr-only">Command K</span>
```

### Rich items and grouping

* Decorative elements: If a `<CommandItem>` contains icons, status dots, or user avatars, wrap those visual elements with `aria-hidden="true"` to prevent screen readers from cluttering the item's primary text label.
* Group heading strings: Always pass plain, descriptive strings to `<CommandGroup heading="...">` (e.g., `heading="System Settings"`). Avoid passing complex JSX into the heading prop to ensure cmdk can parse and set the group's accessible label correctly.

### Visual and custom styling overrides

* Selection state contrast: When extending Tailwind styles for active item states (`data-[selected="true"]`), maintain at least a 4.5:1 contrast ratio between the selected background fill and the text color.
* Focus indicators: If using `<Command>` outside of a modal popover, ensure custom focus rings (`focus-visible:ring-2`) remain clearly visible when navigating into the input field via Tab.

## 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.

### Dialog

Render the Command palette inside a Dialog when it should take over the screen—typically opened with ⌘K or Ctrl+K—for app-wide action and navigation search.

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

### Filtering

Use Command filtering when the result list narrows as the user types, helping them find actions or destinations quickly in a large catalog.

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

### Disabled items

Show disabled items in the Command list when an action exists but is unavailable in the current context—for example, a delete action with nothing selected.

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

### Multiple groups

Group Command results into categories—such as Actions, Pages, and Recent—so users can scan related items instead of scrolling one flat list.

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

### Custom styling

Apply custom styling to the Command palette when it must match a branded surface or fit a constrained layout, while keeping keyboard navigation and grouping behavior intact.

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

### Keyboard navigation

Ensure the Command palette supports arrow-key movement, Enter to select, and Escape to dismiss so power users can operate it entirely from the keyboard.

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

### No results found

Show a no-results state in the Command palette when the query matches nothing, including the search term so users know to try different keywords.

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

### Long list

Use the long-list Command pattern when many results are available, relying on filtering and scrollable groups to keep navigation manageable.

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

### Async search

Use async search in the Command palette when results load from an API, showing a loading state until matches return and updating the list as the user types.

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