# Stage lift

A modal dialog that arrives like a performer on a theatre stage lift: the house lights dim, a trap opens in the stage floor, and the card rises through it on a platform with two guide rails, settling at centre stage under a pool of light. Closing sinks it back and the trap shuts. The dialog is the kit’s own native ; showModal() still holds the focus, the Escape key and the return of it, exactly as the plain Dialog does.

Kit part · With the Kit · https://tactileui.dev/parts/stage-lift

> 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 card is the kit’s own dialog panel: the same width, corners, face and shadow as the plain Dialog, with core.css’s own fade and scale turned off so they never fight the lift. The carriage around the panel carries a thin steel platform as its own edge, outside the panel’s scroll box; the two guide rails run from under the plate down to the trap, and stay there once it has settled.

## Variants

- Longer body text

## States

- Shut
- Open

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-lock | attribute | Turns off the click on the dimmed floor that otherwise closes it, for a dialog that holds a decision. |
| showModal() · close() | method | Opens modally with a backdrop, traps focus, returns it to the key that opened it on close. |
| Escape | keyboard | Closes it, as native; the plate sinks and the floor seam shuts behind it. |

## Usage notes

Open it: the house lights dim, the floor opens along its seam, and the card rises through the gap on its platform. Escape, the flat key, or a press on the dimmed floor outside the card puts it away; the plate sinks and the flaps meet behind it.

## Accessibility

- Escape closes it.
- Under reduced motion there is no climb and no flap: the trap is already open and the plate already up the instant it shows, and it only fades.

## Related parts

- [Dialog](https://tactileui.dev/parts/dialog): A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.
- [Alert dialog](https://tactileui.dev/parts/alert-dialog): The dialog plate for a question that must be answered before an act that matters. A caution strip is set across its head with one lamp in it, red when the act cannot be undone and amber when it can. The question is the title, one sentence says what will happen, and a grave act can ask for its name to be typed first.
- [Drawer](https://tactileui.dev/parts/drawer): A panel that slides in from any edge of the window, on the native dialog. A face plate bolted to the frame, with a machined grip let into its inner edge to pull it shut by.
- [Bottom sheet](https://tactileui.dev/parts/bottom-sheet): A panel that rises from the bottom edge of the window, on the native dialog, for a short task that should not leave the page: add an expense, set some filters, pick an action. It stops at two heights, half and full. A grip in its top edge drags it, or steps it between the heights from the keyboard; dragged down from half it goes away. The key that saves stays in sight at half, and the content scrolls only when the sheet is full. On a phone it is the whole width; on a wide screen it is a card, centred, standing on the bottom edge.