Command palette

Overview

Quickly navigate and invoke expert workflows. It preserves organization, region, farm and entity scope while the user changes location or peer view.

When to use

Use HE/Command palette when you need to quickly navigate and invoke expert workflows. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<div class="he-command-palette"><label class="he-field"><span class="he-sr-only">Search commands</span><input class="he-field__control" placeholder="Go to farm or device"></label><div class="he-command-palette__list" role="listbox" aria-label="Commands"><button class="he-command-palette__option" role="option">Open AIEdge D1</button><button class="he-command-palette__option" role="option">Start live session</button></div></div>

Anatomy

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Accessibility

Provide a dialog label, combobox navigation, shortcut disclosure, and focus return.

• Maintain a visible keyboard focus indicator and a logical focus sequence.
• Never rely on colour alone for operational, freshness or severity state.
• Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

Related components