---
title: Choosing a component
description: A decision guide for the overlapping Components — CommandDialog vs StepperCommandDialog, DataPage vs DataTables, and Dialog vs CommandDialog.
---


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`](/components/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`](/components/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`](/components/commandform/) | The same typed fields `CommandDialog` uses, without the dialog chrome. |
| Collect data and return it **without** running a command | [`Dialog`](/components/dialogs/) | 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`](/components/datapage/) | A resizable page composition with toolbar and detail areas wired to the query. |
| Just a grid inside a layout you already have | [`DataTables`](/components/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](/components/list-screen-with-actions/), 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](/components/list-screen-with-actions/) recipe.

Still deciding how to style any of this? See [Styling](/components/styling/).