Live Docs

Navigation

Advanced /

stable

Command Palette

Global quick-action modal dengan fuzzy search, grouping, keyboard navigation, dan trigger siap pakai.

import { CommandPalette, CommandPaletteTrigger } from "@naraya/ui";

Examples

Controlled palette

Klik trigger untuk membuka command palette.

const [open, setOpen] = useState(false);
<CommandPaletteTrigger onClick={() => setOpen(true)} />
<CommandPalette open={open} onOpenChange={setOpen} items={items} />

Compact trigger

<CommandPaletteTrigger compact label="Command" />

Props

PropTypeDefaultDescription
open*boolean—State buka/tutup palette.
onOpenChange*(open: boolean) => void—Callback perubahan open state.
items*CommandItem[]—Daftar command.
placeholderstring"Type a command or search..."Placeholder input search.
emptyMessagestring"No results found."Pesan saat tidak ada hasil.
CommandPaletteTrigger.labelstring"Search..."Label trigger button.
CommandPaletteTrigger.shortcutstring—Override shortcut badge.
CommandItem.onSelect*() => void—Aksi saat command dipilih.

Tokens Used

--bg-surface

Panel/background command palette

--border-subtle

Input/list border

--shadow-xl

Modal elevation

--color-primary

Active item accent

Accessibility

  • Palette ditampilkan sebagai dialog modal dengan overlay.
  • Keyboard support: ArrowUp/Down, Enter, Escape.
  • Gunakan label command yang jelas agar dapat dipahami tanpa konteks visual.