Componentes

Command

beta

Paleta de busca e ação para quem já conhece o produto. Atalho, nunca o único caminho para alguma coisa.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/command

Playground

Placeholder da buscaplaceholder

Mostrar atalhoshowShortcut

Desabilitar 'Registrar sessão'disabled

<CommandInput />
<CommandItem>
  Registrar sessão
    <CommandShortcut>⌘R</CommandShortcut>
</CommandItem>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.

Command
  └─ CommandInput
  └─ CommandList
    └─ CommandEmpty
    └─ CommandGroup
      └─ CommandItem

Exportadas, mas sem demonstração nesta página: CommandDialog.

Uso

Busca com filtro por texto. Renderiza inline por padrão — a versão em diálogo é uma camada por cima, não outro componente.

Grupos e separador

`CommandGroup` reúne itens sob um rótulo. `CommandSeparator` marca a fronteira entre categorias diferentes — aluno não é turma, e turma não é ação.

Atalho de teclado

`CommandShortcut` documenta a tecla — não a executa. O componente não escuta teclado global; isso é responsabilidade de quem monta a paleta.

Selecionado e desabilitado

O item ativo pelo teclado ganha fundo sozinho — não estilize isso na mão. `disabled` tira o item da navegação sem escondê-lo.

Estado vazio

`CommandEmpty` só aparece quando a busca não bate com nenhum item — o `cmdk` decide isso sozinho, não é uma prop condicional sua.

Em diálogo

`CommandDialog` é o Command dentro de um `Dialog` — paleta de comandos de verdade, aberta por atalho global. Quando não usar: se a ação também precisa estar visível em algum menu ou botão da tela, a paleta é atalho, não substituição. Nenhuma ação pode existir só dentro dela.

⌘K abre a paleta sobre a tela atual — a mesma anatomia acima, dentro de DialogContent.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

CommandDialog

Prop	Tipo	Padrão
children*	string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null	—
className	string	—
description	string	"Search for a command to run..."
showCloseButton	boolean	false
title	string	"Command Palette"

Também aceita as props de Base UI.

Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado

Anatomia: exemplo desta página
Demonstrações e playground: componente real de @voxmente/ui
Referência da API: TypeScript do pacote
Cor, espaçamento e raio das demonstrações: tokens de theme.css