What does Radix UI handle when you open a dialog?

In the documented modal pattern, focus moves into the dialog, Tab stays within its controls and Escape closes it and returns focus to the opening button. Focus is the place that receives keyboard input. Give the dialog a clear title and choose what a person should do first.

Can you keep your own button and visual style?

Yes. You supply the CSS for the panel, spacing and visible focus outline. If you reuse your own React button as the trigger, it needs to pass the supplied properties and reference through to the actual button so the library can connect its keyboard behavior.

Start with a native button. Swap in the branded version after the first example works, then repeat the keyboard checks.

What do you maintain after choosing Radix?

Radix Primitives is an MIT-licensed package. Keep your components, styling and dependency version in your project. When you update the package or change the custom trigger, repeat the checks for opening, canceling and returning focus.

How would you check an Edit booking dialog?

Sketch a fictional booking screen and a dialog with a title, a time field and Cancel and Save buttons. Use the sketch to agree what should happen before adding the control to an app.

Trace the keyboard path
Mark the focus target after opening. Walk forward and backward through the controls. Pressing Escape should close the dialog and return to Edit booking.
Separate cancel from saving
Write down what each button changes. Cancel should leave the booking alone. Save should only update it after the time passes validation. Check that your real app makes the focused control and any error visible.