cosmemilton-ui/clientAcoes & navegacao

CmCommand

Use para atalhos globais ou locais quando ha varias acoes acessiveis pelo teclado.

Import

tsx
import { CmCommand } from "cosmemilton-ui/client";

Paleta de comandos

tsx
"use client";

import { CmButton, CmCommand } from "cosmemilton-ui/client";

export default function Example() {
  return (
    <CmCommand
      title="Comandos"
      description="Acesse acoes frequentes pelo teclado."
      placeholder="Buscar acao..."
      items={[
        { id: "new-order", label: "Novo pedido", shortcut: "N" },
        { id: "export", label: "Exportar relatorio", shortcut: "E" },
        { id: "settings", label: "Abrir configuracoes", shortcut: "," },
      ]}
      trigger={(open) => (
        <CmButton variant="outline" onClick={open}>
          Abrir comandos
        </CmButton>
      )}
    />
  );
}

API rapida

CmCommand

itemstriggerplaceholdertitleemptyMessage