BundyUI

Overlays

Kbd

CommandPalette

A keyboard-driven modal for finding and running commands over grouped, filterable items.

html
<UiCommandPalette :groups="..." />

Groups

required

groups is the contents, each a labelled section of items. An item can navigate with to or run something with onSelect, and carry an icon, a description, a suffix, or a disabled flag.

Last run: nothing yet

Items support both to (navigates automatically on select, like Link) and onSelect (an arbitrary callback, called first) — combine them if you want to run a side effect and then navigate.

Placeholder

placeholder is the text in the search field before anything is typed. Naming what can be found — “Search commands and pages” — does more than the word “Search” alone.

placeholder defaults to 'Search...', a generic default — set it explicitly (e.g. to match a paired ContentSearchButton's own placeholder) rather than relying on the two staying in sync on their own.

Shortcut

shortcut is the global key combination that toggles the palette. Pass an empty array to register nothing — which is what the example below does, so it can't fight the site's own.

The keyboard shortcut (default ⌘K/Ctrl+K) is registered globally as soon as this component is mounted, whether or not it's currently open — mounting more than one on a page would double-register it.

Open

Bind it with v-model:open so a button, a menu item or a route guard can open the palette.

Open state: false

Default open

defaultOpen starts the palette open when it manages its own state. It's shown as source only here: a palette that opened itself on this page would cover the one above it.

Renders open on mount.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
groupsrequired
CommandPaletteGroup[]
—
The groups of items to display in the palette.
placeholder
string
'Search...'
shortcut
string[]
['meta', 'k']
Keys that toggle the palette globally, e.g. ['meta', 'k']. Pass an empty array to disable.
open
boolean
—
Whether the palette is open, for controlled usage with v-model:open.
defaultOpen
boolean
false
Whether the palette is open by default when uncontrolled.

Emits

Event
Payload
Description
update:open
[value: boolean]
—
select
[item: CommandPaletteItem]
—

Types

ts
interface CommandPaletteItem {
    label: string;
    description?: string;
    icon?: string;
    suffix?: string;

    /**
     * Navigates here on select, same as a `Link`'s `to`.
     */
    to?: string;

    /**
     * Called on select, before `to` (if set) navigates. Use this for non-navigation actions
     * (running a command, toggling something, etc.).
     */
    onSelect?: (e: Event) => void;

    disabled?: boolean;
}
ts
interface CommandPaletteGroup {
    label?: string;
    items: CommandPaletteItem[];
}