Choosing a component

Several Components solve similar-looking problems, and it’s not always obvious which one to reach for. This page is the decision guide: pick by what you’re building, then follow the link to the recipe or reference.

Collecting input

The question is whether confirming the form runs a command, and whether it’s one step or several.

You want to…	Use	Why
Collect a few fields and run one command	CommandDialog	Instantiates, validates, and executes the command; handles the footer and button states. The default.
Run a command, but gather input across named steps	StepperCommandDialog	A wizard over a single command — validate per step, navigate back and forth, execute at the end.
Embed command fields in a page, not a dialog	CommandForm	The same typed fields CommandDialog uses, without the dialog chrome.
Collect data and return it without running a command	Dialog	A confirmation or data-entry dialog that hands values back to the caller. No command involved.

Rule of thumb: if confirming the dialog executes a generated command, it’s a CommandDialog (or its stepper variant). If it just gathers values and returns them, it’s a Dialog. Never reach for PrimeReact’s raw Dialog — these wrappers handle validation timing, loading state, and footers consistently.

Displaying data

Both render a query or observable query; the question is whether you want a whole page or a table to drop into one.

You want to…	Use	Why
A full screen: a list, a toolbar of actions, detail panels	DataPage	A resizable page composition with toolbar and detail areas wired to the query.
Just a grid inside a layout you already have	DataTables	The table wrappers — paging, sorting, and selection over a query — without the page scaffolding.

If you’re building a list-screen-with-actions from scratch, start with the list screen recipe, which composes DataPage with CommandDialog actions.

Putting it together

A typical CRUD screen combines these: a DataPage lists the rows, a toolbar button opens a CommandDialog to add one, and selecting a row opens another CommandDialog to edit it. That whole screen is the list screen with actions recipe.

Still deciding how to style any of this? See Styling.