Astryx Design System

Usage

CommandPalette is a searchable dialog for quick access to commands, navigation, and actions. Use it as a keyboard-driven launcher powered by SearchSource for filtering and selection.

ts
import {CommandPalette} from '@astryxdesign/core/CommandPalette'

Best practices

Guidance	Practices
Do	Provide a searchSource with bootstrap results so users see useful options before typing.
Do	Use auxiliaryData.group on items to automatically organize results into labeled sections.
Don't	Use CommandPalette for simple dropdowns or menus; use Menu or Selector for inline selections.
Don't	Add too many groups or items; curate results to keep the palette fast and scannable.

Examples

Common configurations, variations, and states.

CommandPalette — Async Search

Server-side search with loading spinner and custom empty states.

CommandPalette — Grouped

Command palette with items grouped via auxiliaryData.group.

CommandPalette — Custom Footer

Command palette with a custom footer tip message.

CommandPalette — Picker Mode

Single-value picker with persistent selection and check indicator.

CommandPalette — Rich Items

Custom item rendering with icons, keyboard shortcuts, and keyword search.