XDS — Design System

XDSCommandPaletteFooter@xds/core · CommandPalette

Usage

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

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 XDSMenu or XDSSelector for inline selections.
Don't	Add too many groups or items — curate results to keep the palette fast and scannable.

Import

ts
import {XDSCommandPaletteFooter} from '@xds/core/CommandPalette'

Props

Prop	Type	Description
children	ReactNode	Custom footer content. When omitted, renders default keyboard hints via XDSKbd.
xstyle	StyleXStyles	StyleX styles for layout customization. Must be a stylex.create() value.

Showcase source

tsx
'use client';
import {useMemo} from 'react';
import {
  XDSCommandPalette,
  XDSCommandPaletteFooter,
} from '@xds/core/CommandPalette';
import {XDSText} from '@xds/core/Text';
import {createStaticSource} from '@xds/core/Typeahead';
export default function CommandPaletteFooterShowcase() {
  const source = useMemo(
    () =>
      createStaticSource([
        {id: 'new-file', label: 'New File'},
        {id: 'open-recent', label: 'Open Recent'},
        {id: 'save-all', label: 'Save All'},
      ]),
    [],
  );
  return (
    <XDSCommandPalette
      isOpen
      isInline
      onOpenChange={() => {}}
      searchSource={source}
      footer={
        <XDSCommandPaletteFooter>
          <XDSText type="supporting" color="secondary">
            Tip: Press ⌘K anywhere to open the command palette
          </XDSText>
        </XDSCommandPaletteFooter>
      }
    />
  );
}