Navegar componentes

CommandPalette

CommandPaletteExemplo

CommandPalette é um dialog pesquisável para acesso rápido a comandos, navegação e ações. Use como launcher acionado por teclado, alimentado por SearchSource para filtragem e seleção.

Importação

import {CommandPalette} from '@pharos-ds/core/CommandPalette';

Exemplos

Área interativa

isInline

Código

import {CommandPalette} from '@pharos-ds/core/CommandPalette';

<CommandPalette
  isInline
 />

Boas práticas

Faça: Forneça um searchSource com resultados de bootstrap, para que usuários vejam opções úteis antes de digitar.
Faça: Use auxiliaryData.group nos itens para organizar resultados automaticamente em seções rotuladas.
Evite: Use CommandPalette para dropdowns ou menus simples; use Menu ou Selector para seleções inline.
Evite: Adicione grupos ou itens demais; cure resultados para manter a palette rápida e escaneável.

Props

Prop	Tipo	Padrão	Descrição
`isOpen` *	`boolean`	—	Se o dialog da command palette está visível.
`onOpenChange` *	`(isOpen: boolean) => void`	—	Chamado quando a visibilidade da palette muda.
`searchSource` *	`SearchSource<T>`	—	Search source que fornece itens via search(query) e bootstrap(). Use createStaticSource para listas estáticas.
`input`	`ReactNode`	`<CommandPaletteInput />`	Slot de input. Padrão: CommandPaletteInput com comportamento padrão.
`footer`	`ReactNode`	`<CommandPaletteFooter />`	Slot de footer. Padrão: CommandPaletteFooter mostrando dicas de teclado.
`renderItem`	`(item: T, isSelected: boolean) => ReactNode`	—	Função de renderização por item. Auto-agrupamento por auxiliaryData.group é preservado. Quando omitida, renderiza texto do rótulo.
`emptySearchText`	`ReactNode`	`'No results'`	Conteúdo exibido quando uma query de busca não retorna resultados.
`emptyBootstrapText`	`ReactNode`	`'Type to search'`	Conteúdo exibido quando não há query de busca e bootstrap() não retorna nada.
`value`	`string`	—	Valor selecionado controlado para modo picker.
`onValueChange`	`(value: string) => void`	—	Chamado quando o valor selecionado muda no modo picker.
`label`	`string`	`'Command palette'`	Rótulo acessível para o dialog da command palette.
`width`	`number \| string`	`640`	Largura do dialog.
`maxHeight`	`number \| string`	`480`	Altura máxima do dialog.
`isInline`	`boolean`	`false`	Renderiza o conteúdo da command palette inline, sem comportamento modal. Desabilita automaticamente auto-focus do input e auto-scroll inicial do item destacado. Apenas para previews e showcases de documentação.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/CommandPalette