Overview

The Command palette is a component that enables quick and easy switching between contexts, instances, or executing actions. The component is an indivisible part of the Tool Header and should be used only in the context of the Tool Header.

When to use

false

Recommended

To provide an easy way of navigation and context switching.
To list possible actions that can be executed.
To search for actions or objects.
To execute contextual actions without leaving the current page.

dont

false

Not recommended

Do not use it if you need only the search functionality. You can use Tool Header Search instead.
Do not use it to list all available actions and navigation options at once.

Anatomy

15.44; 40.54

Input Field

The primary input component that opens the popover.

25.55; 33.37

Search Phrase

Displays the search phrase that will be used to execute the search in the selected context.

34.38; 23.21

Group Title

47.61; 30.78

Navigation item

Suggested items that can be used to execute actions, navigate in the application or run AI Prompt.

84.56; 51.29

Footer

It contains hints for possible keyboard shortcuts that modify the input type.

Operation modes

When the command palette is opened, it includes specific areas designed to enhance the user experience. These areas are ordered depending on the context and the operation mode. To facilitate effortless navigation, users have the option to navigate the list of results using keyboard.

In summary, the initial state of the command palette provides users with a convenient display of recent actions and context-based suggestions, facilitating quick access to frequently used commands and offering relevant recommendations based on the user's current context.

Command Palette - Search.png

The default action, regardless of the context of the command palette, is the search. If the command palette is triggered within a context (ex.: Instance, Account, or any page from the navigation), it offers to limit the search to the context or to perform a product-wide search.

Command Palette - Actions.png

Actions

The Action mode showcases context-based suggestions for actions. Switching to this mode happens with the " > " key. The suggestions are dynamically generated and tailored to the user's current context. By considering the user's activities, the command palette suggests relevant actions, enabling users to discover new features or actions they may find useful.

Command Palette - Navigation.png

Navigation

The navigation mode is triggered by the shortcut key " / " and allows the user to quickly navigate to the desired page from the product, or to load the context into the Command palette to perform context-specific action. This section displays a list of frequently used navigation items. Users can easily access their preferred actions directly from this area, making their workflow more efficient.

<div> <div>Icon</div> <div>Mode</div> <div>Shortcut</div> </div> <div> <div></div> <div>Search (Default)</div> <div></div> </div> <div> <div></div> <div>Navigation</div> <div> <h3 id="-2"><code>/</code></h3> </div> </div> <div> <div></div> <div>Action</div> <div> <h3 id="-1"><code>></code></h3> </div> </div>

Input Structure

29.37; 19.82

Icon

Used to indicate the operation mode. For every

32.52; 41.73

Placeholder text

68.74; 28.19

Context

Indication of the current context.

71.50; 38.15

Slash

Indicates the hierarchy of the context

68.74; 55.48

Input

Typed text or prefilled based on the selected item from the list

Groups order

Areas - Search.png

Search Mode

Areas - Navigation.png

Navigation Mode

Areas - Actions.png

Action Mode

34.34; 5.06

Icon

They are used to differentiate between action, navigation, or search query.

37.14; 15.19

Title

Name of the Destination or Action.

58.12; 93.69

Info Label

Displays the type of the action

37.14; 90.44

Hint

Navigation items display hints to help the user to operate with them

Responsiveness

Phone

On mobile phones, there are certain limitations because of the virtual keyboard. The navigation items support only direct navigation to the item instead of having the ability to switch contexts without reloading the page.

Command Palette - Phone

Resources

Design

Command Palette - Visual Design Specification

Leave Feedback

We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.

Leave Feedback