Tulip Logo IconTulip
Commands

Primitives

Low-level command primitives and how to use each one.

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

Built on the UI Form Dialog, with command-specific triggers, React Hook Form validation, and mutation handling. Existing component names and mutation props remain the same. During submission, the shared dialog disables submit and cancel and prevents dismissal. Successful creation resets and closes the form; failed mutations retain values for retry.

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.

Utilities

Utility command components for common action patterns.

Examples

Practical command patterns using atomic command values and local composition.

On this page

CommandClickCommandDialogCommandDropdownCommandFormDialogCommandAlertDialogTrigger and label helpersCommandTriggerCommandLabelCommandIconCommandEmptyHotkeys