novixuiv0.1
Install

Recipes · Flows

Modal workflows

A confirmation dialog with a clear destructive path. Focus is trapped inside the dialog and restored to the trigger on close.

Preview

The exact composition below is what ships in production apps built on Nova.

Delete workspace?

This action is permanent. All data will be removed within 24 hours.

Source

tsx
import { Button, Card } from "@novix-ui/react";
import * as Dialog from "@radix-ui/react-dialog";
 
export function DeleteDialog({ open, onOpenChange }) {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-background/60 backdrop-blur-sm" />
        <Dialog.Content className="fixed left-1/2 top-1/2 w-[min(92vw,420px)] -translate-x-1/2 -translate-y-1/2">
          <Card className="p-5 shadow-glow">
            <Dialog.Title className="font-semibold">Delete workspace?</Dialog.Title>
            <Dialog.Description className="mt-1 text-sm text-muted-foreground">
              This action is permanent.
            </Dialog.Description>
            <div className="mt-5 flex justify-end gap-2">
              <Dialog.Close asChild>
                <Button variant="ghost">Cancel</Button>
              </Dialog.Close>
              <Button variant="destructive">Delete</Button>
            </div>
          </Card>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

Anatomy

  • Backdrop uses bg-background/60 + backdrop-blur to keep context visible.
  • Dialog width capped at ~420px so it never dominates.
  • Destructive action is right-most; primary path is left (Cancel).
  • Escape closes; focus returns to the invoking trigger.