Primitives

Primitives are building blocks used inside command .render(...) functions.

`CommandClick`

What it is:

a direct action primitive that triggers a mutation immediately
supports label, disabled, and hotkey

<CommandClick
  label="Archiveren"
  hotkey="a"
  variables={{ ids }}
  mutation={orpc.projects.archive.mutationOptions({ onSuccess: () => {} })}
>
  <Icons.archive className="w-4" />
  <CommandLabel />
</CommandClick>

`CommandDialog`

What it is:

dialog primitive for command flows that need custom content

Key parts:

CommandDialog
CommandDialogTrigger
CommandDialogContent
CommandDialogHeader / Title / Description / Footer

Good for:

multi-step confirmation/info flows without full form abstraction

<CommandDialog>
  <CommandDialogTrigger label="Preview">
    <Icons.preview className="w-4" />
    <CommandLabel />
  </CommandDialogTrigger>
  <CommandDialogContent>
    <CommandDialogHeader>
      <CommandDialogTitle>Preview</CommandDialogTitle>
      <CommandDialogDescription>Review this record before continuing.</CommandDialogDescription>
    </CommandDialogHeader>
  </CommandDialogContent>
</CommandDialog>

`CommandDropdown`

What it is:

nested choice primitive for one command with multiple outcomes

Key parts:

CommandDropdown
CommandDropdownTrigger
CommandDropdownContent
CommandDropdownItem

Good for:

status menus
assignee selection
quick enum changes

<CommandDropdown>
  <CommandDropdownTrigger label="Status">
    <Icons.edit className="w-4" />
    <CommandLabel />
  </CommandDropdownTrigger>
  <CommandDropdownContent>
    <CommandDropdownItem variables={{ ids, status: "done" }} mutation={mutation}>Done</CommandDropdownItem>
  </CommandDropdownContent>
</CommandDropdown>

`CommandFormDialog`

What it is:

form-focused dialog primitive integrated with command mutation lifecycle

Key parts:

CommandFormDialog
CommandFormDialogTrigger
CommandFormDialogContentProvider
CommandFormDialogContent
CommandFormDialogFields
CommandFormDialogFooter
CommandFormDialogCancel
CommandFormDialogSubmit

Good for:

create/edit commands with validated form input

const form = useForm<CreateProjectInput>({ defaultValues: { name: "" } });

return (
  <CommandFormDialog>
    <CommandFormDialogTrigger label="Create project">
      <Icons.plus className="w-4" />
      <CommandLabel />
    </CommandFormDialogTrigger>

    <Form {...form}>
      <CommandFormDialogContent
        variables={(values) => values}
        mutation={orpc.projects.create.mutationOptions()}
      >
        <CommandFormDialogHeader>
          <CommandFormDialogTitle>Create project</CommandFormDialogTitle>
        </CommandFormDialogHeader>
        <CommandFormDialogFields>{/* form fields */}</CommandFormDialogFields>
        <CommandFormDialogFooter>
          <CommandFormDialogCancel>Cancel</CommandFormDialogCancel>
          <CommandFormDialogSubmit>Create</CommandFormDialogSubmit>
        </CommandFormDialogFooter>
      </CommandFormDialogContent>
    </Form>
  </CommandFormDialog>
);

`CommandAlertDialog`

What it is:

confirmation primitive for destructive actions

Key parts:

CommandAlertDialog
CommandAlertDialogTrigger
CommandAlertDialogContent
CommandAlertDialogAction
plus header/title/description/footer/cancel parts

Good for:

delete/remove/destructive operations

<CommandAlertDialog>
  <CommandAlertDialogTrigger label="Delete" className="text-destructive">
    <Icons.trash className="w-4" />
    <CommandLabel />
  </CommandAlertDialogTrigger>
  <CommandAlertDialogContent>
    <CommandAlertDialogHeader>
      <CommandAlertDialogTitle>Delete this item?</CommandAlertDialogTitle>
      <CommandAlertDialogDescription>This cannot be undone.</CommandAlertDialogDescription>
    </CommandAlertDialogHeader>
    <CommandAlertDialogFooter>
      <CommandAlertDialogCancel>Cancel</CommandAlertDialogCancel>
      <CommandAlertDialogAction variables={{ id }} mutation={mutation}>Delete</CommandAlertDialogAction>
    </CommandAlertDialogFooter>
  </CommandAlertDialogContent>
</CommandAlertDialog>

Trigger and label helpers

`CommandTrigger`

wrapper for command trigger behavior and tooltip/label handling across UIs
shows the label as a tooltip in inline/table UIs

`CommandLabel`

shows trigger label in dropdown/context UI variants

`CommandIcon`

renders icon content with label-aware behavior
use this instead of manually pairing an icon with CommandLabel when the icon is the only visible content

<CommandClick label="Archive" variables={{ ids }} mutation={mutation}>
  <CommandIcon>
    <Icons.archive className="w-4" />
  </CommandIcon>
</CommandClick>

`CommandEmpty`

What it is:

non-mutating placeholder action primitive

Good for:

disabled/unavailable command slots
upcoming action placeholders in menus

<CommandEmpty label="Geen acties beschikbaar">Geen acties beschikbaar</CommandEmpty>

Hotkeys

These triggers support hotkey:

CommandClick
CommandDialogTrigger
CommandFormDialogTrigger
CommandAlertDialogTrigger

Hotkeys use the same key format as react-hotkeys-hook.

Primitives

On this page