# Dialog

Source: https://design.ritchiebros.com/components/feedback/dialog/

A dialog is a modal window that appears in front of app content to provide critical information or ask for a decision. It disables the rest of the interface until it’s addressed.

## Figma

The Figma reference for **Dialog** will appear here once the design link is added.

## Storybook

Interactive examples for **Dialog** will render here once the Storybook link is wired in.

## Best practices

- Use a dialog for a focused task or an important decision that needs immediate attention.
- Give it a clear title and keep the content to a single purpose.
- Place the primary action button consistently and clearly distinguish it from secondary actions.
- Confirm destructive actions in a dialog before they run.
- Provide an obvious way to close or cancel.

## Do’s and don’ts

**Do:** Interrupt with a dialog only for decisions that truly require immediate attention.

**Don’t:** Use a dialog for routine, non-blocking messages — use an alert or snackbar instead.

## Accessibility

- Move focus into the dialog when it opens and trap focus within it while it’s open.
- Return focus to the triggering control when the dialog closes.
- Support closing with the Escape key.

## Related components

- [Modal](https://design.ritchiebros.com/components/utils/modal/)
- [Alert](https://design.ritchiebros.com/components/feedback/alert/)
- [Snackbar](https://design.ritchiebros.com/components/feedback/snackbar/)