Stacking
Open an overlay from another overlay.
Overlays stack inside one Cue environment. The provider renders one backdrop for the whole stack.
Open Settings, then Delete Atlas to put a confirm dialog on top. Closing the top instance leaves the lower instance and shared backdrop visible.
Example
import { Button } from "@/components/ui/button";
export const settingsDialog = cue.createOverlay((_props, ctx) => {
const components = ctx.components;
return (
<components.wrapper open={ctx.open} onOpenChange={ctx.onOpenChange}>
<components.content>
<components.title>Settings</components.title>
<components.footer>
<Button
onClick={() =>
confirmDeleteDialog.open({
organizationName: "Atlas",
})
}
>
Delete Atlas…
</Button>
</components.footer>
</components.content>
</components.wrapper>
);
});