# Dialog

A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.

Kit part · With the Kit · https://tactileui.dev/parts/dialog

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The browser’s own dialog, dressed.

## Variants

- Destructive

## States

- Open
- Destructive
- Focus on the act

## Props and options

| Name | Kind | Description |
| - | - | - |
| showModal() · close() | method | Opens modally with a backdrop, traps focus, returns it on close. |
| returnValue | property | The value of the key that closed it. |
| close · cancel | event | After it closes; cancel on Escape. |
| Escape | keyboard | Closes it, as native. |

## Usage notes

Open it. Escape or “Keep it” closes it; focus returns to the key.

## Accessibility

- Put the flat key first, so the safe choice is reached first.
- Keyboard: Escape closes a modal dialog, and Tab and Shift+Tab stay on what is inside it, because the page behind is inert. Enter or Space presses the focused key.

## Related parts

- [Toast](https://tactileui.dev/parts/toast): A confirmation after an action.
- [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.